带图标指示器的时间轴功能

最新推荐文章于 2020-06-12 09:17:09 发布

weidong_588518

最新推荐文章于 2020-06-12 09:17:09 发布

阅读量333

点赞数

CC 4.0 BY-SA版权

分类专栏：工作

本文链接：https://blog.youkuaiyun.com/dong5488/article/details/79267505

工作专栏收录该内容

10 篇文章

订阅专栏

最近项目开发中遇到一个时间轴的功能和以往遇到的都不太一样，需要添加图标指引，以及在内容展示区域要展示图文混合，经查询各种资料终于写出，如下效果

上图了：

废话不多说了，直接上代码：

public class MainActivity extends FragmentActivity {

    private RecyclerView recycleView;
    private Context mContext;
    private List<String> mList = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext= MainActivity.this;
        addData();
        recycleView = (RecyclerView) findViewById(R.id.recycler_view);
        //使用线性布局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recycleView.setLayoutManager(layoutManager);
        recycleView.setHasFixedSize(true);
        //用自定义分割线类设置分割线
        recycleView.addItemDecoration(new DividerItemDecoration(this));
        TGTaskContentAdapter adapter = new TGTaskContentAdapter(mContext,mList);
        recycleView.setAdapter(adapter);
    }

主要就是编写了一个自定义DividerItemDecoration类

首页的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#ccc"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="test.wd.com.demo.MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="任务步骤"
            android:textColor="#333"
            android:textSize="16sp" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="15dp"
            android:scrollbars="horizontal" />
    </LinearLayout>
</LinearLayout>

首页的适配器

public class TGTaskContentAdapter extends RecyclerView.Adapter{
    private LayoutInflater inflater;
    private List<String> mList;
    private Context mContext;

    public TGTaskContentAdapter(Context context, List<String> list) {
        this.mList = list;
        mContext = context;
        inflater = LayoutInflater.from(context);
    }


    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(inflater.inflate(R.layout.item_tg_task_content, null));
    }

    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
        //绑定数据到ViewHolder里面
        ViewHolder viewHolde = (ViewHolder) holder;
        viewHolde.title.setText(mList.get(position));
        GridLayoutManager gridLayoutManager = new GridLayoutManager(mContext, 4);
        viewHolde.itemRecycleView.setLayoutManager(gridLayoutManager);
        ItemRecycleViewAdapter adapter = new ItemRecycleViewAdapter(mContext,mList);
        viewHolde.itemRecycleView.setAdapter(adapter);

        adapter.setmOnItemClickListener(new ItemRecycleViewAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                
            }
        });
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        private TextView title;
        private RecyclerView itemRecycleView;
        public ViewHolder(View itemView) {
            super(itemView);
            title = (TextView) itemView.findViewById(R.id.title);
            itemRecycleView = (RecyclerView) itemView.findViewById(R.id.item_recycler_view);
        }
    }

内部还嵌套了一个RecycleView

<?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="match_parent"
    android:orientation="vertical">

    <TextView
        android:textColor="#333"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:text="New Text"
        android:id="@+id/title" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/item_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="horizontal" />

</LinearLayout>

public class ItemRecycleViewAdapter extends RecyclerView.Adapter {

    private List<String> mList;
    private Context mContext;
    private LayoutInflater inflater;

    public ItemRecycleViewAdapter(Context context, List<String> list) {
        this.mList = list;
        this.mContext = context;
        inflater = LayoutInflater.from(context);
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(inflater.inflate(R.layout.item_inner_recycle, null));
    }

    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
        //绑定数据到ViewHolder里面
        ViewHolder viewHolder = (ViewHolder) holder;
        viewHolder.imageView.setImageResource(R.mipmap.renwu_img_help);

        View itemView = ((LinearLayout) holder.itemView).getChildAt(0);
        if (mOnItemClickListener != null) {
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = holder.getLayoutPosition();
                    mOnItemClickListener.onItemClick(holder.itemView, position);
                }
            });
        }
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        private ImageView imageView;
        public ViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageView);
        }
    }


    private OnItemClickListener mOnItemClickListener;//声明接口
    public void setmOnItemClickListener(OnItemClickListener onItemClickListener) {
        mOnItemClickListener = onItemClickListener;
    }

    public interface OnItemClickListener {
        void onItemClick(View view, int position);
    }

package test.wd.com.demo;

import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by 92457 on 2018/2/5.
 * 时间轴
 */

public class DividerItemDecoration extends RecyclerView.ItemDecoration{
    private Context mContext;
    private final Paint mPaint;
    private final Paint mPaint1;

    // 左 上偏移长度
    private int itemView_leftinterval;
    private int itemView_topinterval;
    // 轴点半径
    private int circle_radius;


    //在构造函数里进行绘制的初始化,如画笔属性设置等
    public DividerItemDecoration(Context context) {
        mContext = context;
        //轴点画笔(橘黄色)
        mPaint = new Paint();
        mPaint.setColor(mContext.getResources().getColor(R.color.ff6000));

        //左边时间文本画笔
        mPaint1 = new Paint();

        //赋值ItemView的左偏移长度为200
        itemView_leftinterval = 200;
        //赋值ItemView的上偏移长度为50
        itemView_topinterval = 50;
        //赋值轴点圆的半径为10
        circle_radius = 10;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        // 设置ItemView的左 & 上偏移长度分别为200 px & 50px,即此为onDraw()可绘制的区域
        outRect.set(itemView_leftinterval, itemView_topinterval, 0, 0);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        //获取RecycleView的Child View的个数
        int childCount = parent.getChildCount();

        //遍历每个Item，分别获取他们的位置信息，然后在绘制对应的分割线
        for (int i = 0; i < childCount; i++) {
            //获取每个Item对象
            View child = parent.getChildAt(i);
            /***
             * 绘制轴点
             */
            //轴点 = 圆 = 圆心(x,y)
            float centerx = child.getLeft() - itemView_leftinterval / 3;
            //布局顶部
            float centery = child.getTop() + itemView_topinterval / 2; //itemView_topinterval / 2 解决圆点和右边文字没有对齐
            //布局中间
//            float centery = child.getTop() - itemView_topinterval + (itemView_topinterval + child.getHeight()) / 2

            //绘制轴点圆
            c.drawCircle(centerx, centery, circle_radius, mPaint);

            /***
             * 绘制上半轴线
             */
            //上端点坐标(x，y)
            float upLine_up_x = centerx;
            float upLine_up_y = child.getTop() - itemView_topinterval;

            // 下端点坐标(x,y)
            float upLine_bottom_x = centerx;
            float upLine_bottom_y = centery - circle_radius;

            //绘制上半部轴线
//            c.drawLine(upLine_up_x, upLine_up_y, upLine_bottom_x, upLine_bottom_y, mPaint);
            c.drawLine(upLine_up_x, upLine_up_x, upLine_bottom_x, upLine_bottom_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 = child.getBottom();

            //绘制下半部轴线
            c.drawLine(bottomLine_up_x, bottom_up_y, bottomLine_bottom_x, bottomLine_bottom_y, mPaint);

            /**
             * 绘制左边时间文本
             */
            // 获取每个Item的位置
            int index = parent.getChildAdapterPosition(child);
            // 设置文本起始坐标
            float Text_x = child.getLeft() - itemView_leftinterval * 5 / 6;
            float Text_y = upLine_bottom_y;

            //根据Item位置设置时间文本
            switch (index) {
                case 0:
                    c.drawBitmap(BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.img_bz1),Text_x -30, Text_y-15, mPaint1);
                    break;
                case 1:
                    c.drawBitmap(BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.img_bz2),Text_x -30, Text_y-15, mPaint1);
                    break;
                case 2:
                    c.drawBitmap(BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.img_bz3),Text_x -30, Text_y-15, mPaint1);
                    break;
                case 3:
                    c.drawBitmap(BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.img_bz4),Text_x -30, Text_y-15, mPaint1);
                    break;
                case 4:
                    c.drawBitmap(BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.img_bz5),Text_x -30, Text_y-15, mPaint1);
                    break;
                case 5:
                    c.drawBitmap(BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.img_bz6),Text_x -30, Text_y-15, mPaint1);
                    break;
            }
        }
    }
}

结束了，可以随着内容放大缩放的时间轴

下载地址：http://download.youkuaiyun.com/download/dong5488/10241719