当前位置： 移动技术网 > 移动技术>移动开发>Android > Android自定义时间轴的实现过程

Android自定义时间轴的实现过程

2019年07月24日  | 移动技术网移动技术  | 我要评论

本文讲述android自定义时间轴的实现过程，供大家参考，具体内容如下

相关视频链接：
android自定义控件系列

android视频全系列

时间轴效果，实际上非常简单，就是listview中一个又一个的条目而已….大家可以只关注一个条目。
首先展示一个条目的布局效果

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="75dp"
 android:orientation="horizontal" >

 <!-- 线条部分 -->

 <linearlayout
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:gravity="center_horizontal"
 android:orientation="vertical"
 android:paddingleft="30dp" >

 <view
 android:layout_width="3dp"
 android:layout_height="20dp"
 android:background="#88000000" />

 <com.example.time.timeview
 android:src="@drawable/ic_launcher"
 android:id="@+id/timeview"
 android:layout_width="40dp"
 android:layout_height="40dp" />
 <view
 android:layout_width="3dp"
 android:layout_height="40dp"
 android:background="#88000000" />
 </linearlayout>
 <!-- 文字部分 -->

 <linearlayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:paddingleft="30dp"
 android:paddingright="30dp"
 android:paddingtop="20dp" >

 <textview
 android:id="@+id/tv_content"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="哈哈哈"
 android:textcolor="#ababab" />

 <textview
 android:id="@+id/tv_time"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@id/tv_content"
 android:text="时间"
 android:textcolor="#ababab" />
 </linearlayout>

</linearlayout>

接下来看一下自定义的timeview如何书写

package com.example.time;

import java.util.random;

import android.content.context;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.graphics.paint.style;
import android.graphics.rect;
import android.util.attributeset;
import android.view.view;

public class timeview extends view {

 private random random;
 private string time;
 private rect mbounds = new rect();
 private int rgb;
 public timeview(context context, attributeset attrs, int defstyleattr) {
 super(context, attrs, defstyleattr);
 initview();
 }

 public timeview(context context, attributeset attrs) {
 super(context, attrs);
 initview();
 }

 public timeview(context context) {
 super(context);
 initview();
 }

 private void initview() {

 random = new random();
 //定义颜色---这里纯粹为了好玩--大家定义的时候可以在自定义控件外边定义，将颜色传递进来
 rgb = color.rgb(100+random.nextint(155), 100+random.nextint(155),
 random.nextint(100+155));

 }

 public void settime(string time) {
 this.time = time;
 invalidate();

 }

 @override
 protected void ondraw(canvas canvas) {
 super.ondraw(canvas);
 paint paint = new paint();
 paint.setcolor(rgb);
 paint.setantialias(true);
 paint.setstyle(style.fill_and_stroke);
 //先绘制圆
 canvas.drawcircle(getwidth() / 2, getheight() / 2, getwidth() / 2,
 paint);
 paint = new paint();
 paint.setcolor(color.black);
 paint.settextsize(30);
 paint.gettextbounds(time, 0, time.length(), mbounds);
 float textwidth = mbounds.width();
 float textheight = mbounds.height();
 //再绘制文字
 canvas.drawtext(time, getwidth() / 2 - textwidth / 2, getheight() / 2
 + textheight / 2, paint);
 }

}

看一下activity中的代码–就是一个listview的效果展示

public class mainactivity extends activity {

 private listview listview;

 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 listview = (listview) findviewbyid(r.id.listview);
 initdata();
 listview.setadapter(new mybaseadapter());
 }

 class mybaseadapter extends baseadapter {

 @override
 public int getcount() {
 return datalist.size();
 }

 @override
 public object getitem(int arg0) {
 return datalist.get(arg0);
 }

 @override
 public long getitemid(int arg0) {
 return arg0;
 }

 @override
 public view getview(int arg0, view arg1, viewgroup arg2) {

 view view = view.inflate(mainactivity.this, r.layout.item, null);
 textview tv_content = (textview) view.findviewbyid(r.id.tv_content);
 textview tv_time = (textview) view.findviewbyid(r.id.tv_time);
 timeview timeview = (timeview) view.findviewbyid(r.id.timeview);
 timeview.settime(datalist.get(arg0).gettime());
 tv_content.settext(datalist.get(arg0).getcontent());
 tv_time.settext(datalist.get(arg0).gettime());

 return view;
 }

 }

 arraylist<databean> datalist = new arraylist<databean>();

 private void initdata() {
 for (int i = 0; i < 20; i++) {
 datalist.add(new databean("哈哈哈哈" + i, "25/10"));
 }

 }

}

好了，这样的一个自定义时间轴效果就搞定了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网