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

32f306095f1045d8da8ba6c8f51d2925.png

时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已….大家可以只关注一个条目。

首先展示一个条目的布局效果

android:layout_width="match_parent"

android:layout_height="75dp"

android:orientation="horizontal" >

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center_horizontal"

android:orientation="vertical"

android:paddingLeft="30dp" >

android:layout_width="3dp"

android:layout_height="20dp"

android:background="#88000000" />

android:src="@drawable/ic_launcher"

android:id="@+id/timeView"

android:layout_width="40dp"

android:layout_height="40dp" />

android:layout_width="3dp"

android:layout_height="40dp"

android:background="#88000000" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:paddingLeft="30dp"

android:paddingRight="30dp"

android:paddingTop="20dp" >

android:id="@+id/tv_content"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="哈哈哈"

android:textColor="#ABABAB" />

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" />

接下来看一下自定义的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 dataList = new ArrayList();

private void initData() {

for (int i = 0; i < 20; i++) {

dataList.add(new DataBean("哈哈哈哈" + i, "25/10"));

}

}

}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐