前语
-
在Android开发中,时刻轴的 UI十分常见,如下图:
-
储藏常识:
1.自定义view根底
2.RecyclerView的运用
3.自定义RecyclerView.ItemDecoration
详细完成
1.终究作用如下:
2.完成思路
-
运用RecyclerView,自定义RecyclerView.ItemDecoration
-
温习ItemDecoration中getItemOffsets()办法,重写onDraw()办法
-
完成RecyclerView.Adapter,绑定数据
3.详细规划
4.详细完成
-
引进RecyclerView依靠包
dependencies {
..........
api 'com.android.support:recyclerview-v7:28.0.0'
}
-
在布局文件中运用
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android.support.v7.widget.RecyclerView
android:id=
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal"
/
/RelativeLayout
-
设置item布局
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
TextView
android:id=
android:text="New Text"
android:textSize="15sp"
android:layout_marginLeft="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /
TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:layout_marginLeft="30dp"
android:textSize="15sp"
android:id=
android:layout_below=
/
/LinearLayout
-
完成RecyclerView.Adapter
public class MyAdapter extends RecyclerView.Adapter {
private LayoutInflater inflater;
private ArrayListHashMapString,Object listitem;
//结构函数,传入数据
public MyAdapter(Context context,ArrayListHashMapString, Object listitem) {
this.inflater = LayoutInflater.from(context);
this.listitem = listitem;
}
class ViewHolder extends RecyclerView.ViewHolder{
private TextView title,text;
public ViewHolder {
super(itemView);
title = itemView.findViewById(R.id.item_title);
text = itemView.findViewById(R.id.item_text);
}
public TextView getTitle() {
return title;
}
public TextView getText() {
return text;
}
}
public RecyclerView.ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i) {
return new ViewHolder(inflater.inflate(R.layout.list_cell,null));
//绑定item布局
}
public void onBindViewHolder( RecyclerView.ViewHolder viewHolder, int i) {
//绑定数据到ViewHolder
ViewHolder vh = (ViewHolder) viewHolder;
vh.title.setText((CharSequence) listitem.get(i).get("ItemTitle"));
vh.text.setText((CharSequence) listitem.get(i).get("ItemText"));
}
public int getItemCount() {
return listitem.size();
}
}
-
自定义RecyclerView.ItemDecoration
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
//轴点画笔
private final Paint mPaint;
//时分画笔
private final Paint mPaint1;
//年月画笔
private final Paint mPaint2;
//itemView 左 上 偏移量
private int itemView_leftinterval;
private int itemView_topintervarl;
//轴点半径
private int circle_radius;
private final Bitmap mIcon;
//在结构函数里初始化需求特点
public DividerItemDecoration(Context context){
mPaint = new Paint();
mPaint.setColor(Color.RED);//设置画笔色彩为赤色
mPaint1 = new Paint();
mPaint1.setColor(Color.BLUE);
mPaint1.setTextSize(30);//设置制作字体巨细
mPaint2 = new Paint();
mPaint2.setColor(Color.BLUE);
mPaint2.setTextSize(15);
itemView_leftinterval = 200; //左偏移长度200
itemView_topintervarl = 50; //上偏移长度50
circle_radius = 10;//轴点半径为10
mIcon = BitmapFactory.decodeResource(context.getResources(),R.mipmap.logo);
}
public void getItemOffsets( Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
//设置itemview的左上偏移量,即为onDraw可制作的区域
outRect.set(itemView_leftinterval,itemView_topintervarl,0,0);
}
public void onDraw( Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
//获取RecyclerView的Child的个数
int childCount = parent.getChildCount();
//遍历每个item,别离获取他们的方位信息,然后在制作对应的分割线
for (int i=0;ichildCount;i++){
View view = parent.getChildAt(i);//获取每个item目标
/**
* 制作轴点
*/
// 轴点 = 圆 = 圆心(x,y)
float centerX = view.getLeft() - itemView_leftinterval/3;
float2);
// 制作轴点圆
//c.drawCircle(centerX,centerY,circle_radius,mPaint);
c.drawBitmap(mIcon,centerX-circle_radius,centerY-circle_radius,mPaint);
/**
* 制作上半轴线
*/
// 上端点坐标(x,y)
float upLine_up_x = centerX;
float upLine_up_y =view.getTop()-itemView_topintervarl;
// 下端点坐标(x,y)
float upLine_down_x = centerX;
float upLine_down_y = centerY-circle_radius;
c.drawLine(upLine_up_x,upLine_up_y,upLine_down_x,upLine_down_y,mPaint);//制作下半轴线
/**
* 制作下半轴线
*/
// 上端点坐标(x,y)
float bottomLine_up_x = centerX;
float bottom_up_y = centerY + circle_radius;
// 下端点坐标(x,y)
float bottomLine_bottom_x = centerX;
float bottomLine_bottom_y = view.getBottom();
//制作下半部轴线
c.drawLine(bottomLine_up_x, bottom_up_y, bottomLine_bottom_x, bottomLine_bottom_y, mPaint);
/**
* 制作左面时刻文本
*/
int index = parent.getChildAdapterPosition(view);
//制作时刻文本开始方位
float Text_x = view.getLeft()-itemView_leftinterval*5/6;
float Text_y = upLine_down_y;
//依据item方位设置时刻
switch (index){
case 0:
//设置制作日期
c.drawText("13:40",Text_x,Text_y,mPaint1);
c.drawText("2018.4.03",Text_x+5,Text_y+20,mPaint2);
break;
case 1:
//设置制作日期
c.drawText("13:40",Text_x,Text_y,mPaint1);
c.drawText("2018.4.03",Text_x+5,Text_y+20,mPaint2);
break;
case 2:
//设置制作日期
c.drawText("13:40",Text_x,Text_y,mPaint1);
c.drawText("2018.4.03",Text_x+5,Text_y+20,mPaint2);
break;
case 3:
//设置制作日期
c.drawText("13:40",Text_x,Text_y,mPaint1);
c.drawText("2018.4.03",Text_x+5,Text_y+20,mPaint2);
break;
case 4:
//设置制作日期
c.drawText("13:40",Text_x,Text_y,mPaint1);
c.drawText("2018.4.03",Text_x+5,Text_y+20,mPaint2);
break;
case 5:
//设置制作日期
c.drawText("13:40",Text_x,Text_y,mPaint1);
c.drawText("2018.4.03",Text_x+5,Text_y+20,mPaint2);
break;
default:
c.drawText("已签收",Text_x,Text_y,mPaint1);
}
}
}
}
-
初始化数据,绑定RecyclerView
public class MainActivity extends AppCompatActivity {
private ArrayListHashMapString, Object itemlist;
private RecyclerView rl;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initView();
}
private void initData() {
itemlist = new ArrayListHashMapString, Object();
HashMapString, Object map1 = new HashMapString, Object();
HashMapString, Object map2 = new HashMapString, Object();
HashMapString, Object map3 = new HashMapString, Object();
HashMapString, Object map4 = new HashMapString, Object();
HashMapString, Object map5 = new HashMapString, Object();
HashMapString, Object map6 = new HashMapString, Object();
map1.put("ItemTitle", "我国广州公司已宣布");
map1.put("ItemText", "发件人:妙卡迪文明公司");
itemlist.add(map1);
map2.put("ItemTitle", "世界顺丰已收入");
map2.put("ItemText", "等候中转");
itemlist.add(map2);
map3.put("ItemTitle", "世界顺丰转件中");
map3.put("ItemText", "下一站我国");
itemlist.add(map3);
map4.put("ItemTitle", "我国顺丰已收入");
map4.put("ItemText", "下一站江苏理工大学");
itemlist.add(map4);
map5.put("ItemTitle", "我国顺丰派件中");
map5.put("ItemText", "等候派件");
itemlist.add(map5);
map6.put("ItemTitle", "江苏理工大学已签收");
map6.put("ItemText", "收件人:darryrzhong");
itemlist.add(map6);
}
private void initView() {
rl = findViewById(R.id.my_recycler_view);
LinearLayoutManager manager = new LinearLayoutManager(this);
rl.setLayoutManager(manager);
//当知道Adapter内Item的改动不会影响RecyclerView宽高的时分,能够设置为true让RecyclerView防止从头核算巨细。
rl.setHasFixedSize(true);
rl.addItemDecoration(new DividerItemDecoration(this));//设置自定义分割线
MyAdapter adapter = new MyAdapter(this,itemlist);