首页 快递头条 Android完成快递时间轴功用

Android完成快递时间轴功用

前语 在Android开发中,时刻轴的 UI十分常见,如下图: 储藏常识:1.自定义view根底2.RecyclerView的运用3.自定义RecyclerView.ItemDec…

前语

  • 在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);


本文来自网络,不代表快递资讯网立场。转载请注明出处: http://www.llaiot.com/express-headline/2608.html
上一篇
下一篇

为您推荐