RecyclerView打造一个密码面板

1、效果图及思路

回删键素材

• 1、使用GridLayout的布局管理器，变为12宫格
• 2、每个item是两个textview，一大一下
• 3、下面三个需要一些特殊处理，这个Recyclerview的Adapter代码吧
• 4、分割线–使用鸿洋大神的分割线代码Android RecyclerView 使用完全解析 体验艺术般的控件
• 5、悬浮效果–这个我直接将控件包在cardview中了，因为很好控件能做到阴影效果

2、实现步骤

添加依赖：

    compile 'com.android.support:design:25.3.1'    compile 'com.android.support:cardview-v7:25.3.1'

values:

  <color name="num_bg">#d1d5db</color>  <dimen name="num_item_magin_top">7dp</dimen>  R.mipmap.num_back//这个你自己去找吧，上面有素材  <dimen name="back_num_item_magin_top">18sp</dimen>  <color name="diver_color">#CCCCCC</color>

2.1Recyclerview

     <android.support.v7.widget.CardView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:elevation="8dp"        app:cardElevation="8dp">        <android.support.v7.widget.RecyclerView            android:id="@+id/num_panel"            android:layout_width="match_parent"            android:layout_height="wrap_content" />    </android.support.v7.widget.CardView>

2.2item布局

num_item.xml

<?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="wrap_content"    android:id="@+id/num_item_layout"    android:orientation="vertical">    <TextView        android:id="@+id/num_item"        android:layout_width="wrap_content"        android:layout_height="33dp"        android:layout_gravity="center"        android:textSize="30sp"        android:text="2" />    <TextView        android:id="@+id/letter_item"        android:layout_width="wrap_content"        android:layout_height="17dp"        android:layout_gravity="center"        android:layout_marginBottom="2dp"        android:text="abc"        android:textSize="10sp" /></LinearLayout>

item布局的两个textview，上面一个太高了，下面一个太矮了，所以我用了确定的高度。

2.3Adapter数据适配器

bean

public class NumItem {    private String num;    private String letter;    //getter、setter、toString()方法省略}

onBindViewHolder的几个if语句就是设置位置的，因为这几个在中间位置

import android.content.Context;import android.graphics.drawable.Drawable;import android.support.v7.widget.RecyclerView;import android.util.Log;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import java.util.List;import xxhui.space.newsclient.Bean.NumItem;import xxhui.space.newsclient.R;/** * Created by hui on 2017/7/7. */public class NumItemAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {    private static final String TAG = "NumItemAdapter";    private List<NumItem> data;//textview的显示的字符串数据    private OnItemClickListener clickListener;//给RecyclerView添加点击事件    private Context context;    public NumItemAdapter(List<NumItem> data, Context context) {        this.data = data;        this.context = context.getApplicationContext();    }//初始化时注入数据    public void setOnItemClickListener(OnItemClickListener itemClickListener) {//设置注入item点击监听        clickListener = itemClickListener;    }    /**     * 解析布局，并注入到viewHolder     *     * @return 给下一步提供一个ViewHolder     */    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.num_item, parent, false);        return new ViewHolder(v);    }    /**     * 给ViewHolder里面的控件绑定数据     *     * @param holder     * @param position     */    //犹豫给定图片没有数据格式，默认设置为ic_launcher    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {        if (data != null && data.size() >= position) {            NumItem item = data.get(position);            ViewHolder itemHolder = ((ViewHolder) holder);            itemHolder.num.setText(data.get(position).getNum());            itemHolder.letter.setText(data.get(position).getLetter());            if(position==9){                itemHolder.view.setBackgroundResource(R.color.num_bg);            }            if(position==10){                ViewGroup.MarginLayoutParams marginLayoutParams = (ViewGroup.MarginLayoutParams)itemHolder.num.getLayoutParams();                //<dimen name="num_item_magin_top">7dp</dimen>                marginLayoutParams.topMargin = (int) context.getResources().getDimension(R.dimen.num_item_magin_top);                itemHolder.letter.setVisibility(View.GONE);            }            if (position == 11) {                itemHolder.num.setVisibility(View.GONE);                itemHolder.letter.setVisibility(View.GONE);                Drawable d = context.getResources().getDrawable(R.mipmap.num_back);                LinearLayout layout = (LinearLayout) itemHolder.view;                layout.setBackgroundResource(R.color.num_bg);                ImageView imageView = new ImageView(context);                imageView.setImageDrawable(d);                imageView.setScaleType(ImageView.ScaleType.CENTER);//居中显示                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);                lp.gravity = Gravity.CENTER;                //<dimen name="back_num_item_magin_top">18sp</dimen>                lp.topMargin = (int) context.getResources().getDimension(R.dimen.back_num_item_magin_top);                layout.addView(imageView, lp);            }        }        Log.i(TAG, "onBindViewHolder: " + position);    }    @Override    public int getItemCount() {        return data == null ? 0 : data.size();    }    /**     * 内部类ViewHolder，用于保存绑定控件，如果设置了点击事件，给控件设置点击监听     */    class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {        private TextView num;        private TextView letter;        private View view;        public ViewHolder(View itemView) {            super(itemView);            num = (TextView) itemView.findViewById(R.id.num_item);            letter = (TextView) itemView.findViewById(R.id.letter_item);            view = itemView.findViewById(R.id.num_item_layout);            itemView.setOnClickListener(this);        }        @Override        public void onClick(View v) {            if (clickListener != null) {                clickListener.onItemClick(v, getPosition());            }        }    }    /**     * 定义一个接口用于外部实现RecycleView的item的操作     */    public interface OnItemClickListener {        void onItemClick(View v, int position);    }    public List<NumItem> getData() {        return data;    }    public void setData(List<NumItem> data) {        this.data = data;    }}

2.4分割线布局

<?xml version="1.0" encoding="utf-8"?><!--divider_bg.xml--><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle" >    <solid android:color="@color/diver_color"/>    <size android:height="0.5dp" android:width="0.5dp"/></shape>

2.5DividerGridItemDecoration

这个完全就是鸿洋大神的代码复制过来的，但是为了方便还是贴一下吧。

import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.support.v7.widget.GridLayoutManager;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.StaggeredGridLayoutManager;import android.view.View;/** * Created by hui on 2017/7/7. */public class DividerGridItemDecoration extends RecyclerView.ItemDecoration{    private static final int[] ATTRS = new int[] { android.R.attr.listDivider };    private Drawable mDivider;    public DividerGridItemDecoration(Context context)    {        final TypedArray a = context.obtainStyledAttributes(ATTRS);        mDivider = a.getDrawable(0);        a.recycle();    }    @Override    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state)    {        drawHorizontal(c, parent);        drawVertical(c, parent);    }    private int getSpanCount(RecyclerView parent)    {        // 列数        int spanCount = -1;        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();        if (layoutManager instanceof GridLayoutManager)        {            spanCount = ((GridLayoutManager) layoutManager).getSpanCount();        } else if (layoutManager instanceof StaggeredGridLayoutManager)        {            spanCount = ((StaggeredGridLayoutManager) layoutManager)                    .getSpanCount();        }        return spanCount;    }    public void drawHorizontal(Canvas c, RecyclerView parent)    {        int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++)        {            final View child = parent.getChildAt(i);            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child                    .getLayoutParams();            final int left = child.getLeft() - params.leftMargin;            final int right = child.getRight() + params.rightMargin                    + mDivider.getIntrinsicWidth();            final int top = child.getBottom() + params.bottomMargin;            final int bottom = top + mDivider.getIntrinsicHeight();            mDivider.setBounds(left, top, right, bottom);            mDivider.draw(c);        }    }    public void drawVertical(Canvas c, RecyclerView parent)    {        final int childCount = parent.getChildCount();        for (int i = 0; i < childCount; i++)        {            final View child = parent.getChildAt(i);            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child                    .getLayoutParams();            final int top = child.getTop() - params.topMargin;            final int bottom = child.getBottom() + params.bottomMargin;            final int left = child.getRight() + params.rightMargin;            final int right = left + mDivider.getIntrinsicWidth();            mDivider.setBounds(left, top, right, bottom);            mDivider.draw(c);        }    }    private boolean isLastColum(RecyclerView parent, int pos, int spanCount,                                int childCount)    {        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();        if (layoutManager instanceof GridLayoutManager)        {            if ((pos + 1) % spanCount == 0)// 如果是最后一列，则不需要绘制右边            {                return true;            }        } else if (layoutManager instanceof StaggeredGridLayoutManager)        {            int orientation = ((StaggeredGridLayoutManager) layoutManager)                    .getOrientation();            if (orientation == StaggeredGridLayoutManager.VERTICAL)            {                if ((pos + 1) % spanCount == 0)// 如果是最后一列，则不需要绘制右边                {                    return true;                }            } else            {                childCount = childCount - childCount % spanCount;                if (pos >= childCount)// 如果是最后一列，则不需要绘制右边                    return true;            }        }        return false;    }    private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,                              int childCount)    {        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();        if (layoutManager instanceof GridLayoutManager)        {            childCount = childCount - childCount % spanCount;            if (pos >= childCount)// 如果是最后一行，则不需要绘制底部                return true;        } else if (layoutManager instanceof StaggeredGridLayoutManager)        {            int orientation = ((StaggeredGridLayoutManager) layoutManager)                    .getOrientation();            // StaggeredGridLayoutManager 且纵向滚动            if (orientation == StaggeredGridLayoutManager.VERTICAL)            {                childCount = childCount - childCount % spanCount;                // 如果是最后一行，则不需要绘制底部                if (pos >= childCount)                    return true;            } else            // StaggeredGridLayoutManager 且横向滚动            {                // 如果是最后一行，则不需要绘制底部                if ((pos + 1) % spanCount == 0)                {                    return true;                }            }        }        return false;    }    @Override    public void getItemOffsets(Rect outRect, int itemPosition,                               RecyclerView parent)    {        int spanCount = getSpanCount(parent);        int childCount = parent.getAdapter().getItemCount();        if (isLastRaw(parent, itemPosition, spanCount, childCount))// 如果是最后一行，则不需要绘制底部        {            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);        } else if (isLastColum(parent, itemPosition, spanCount, childCount))// 如果是最后一列，则不需要绘制右边        {            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());        } else        {            outRect.set(0, 0, mDivider.getIntrinsicWidth(),                    mDivider.getIntrinsicHeight());        }    }}

2.6获取数据

    private List<NumItem> nums;    private String letters[] = {"","ABC","DEF","GHI","JKL","MNO","PQRS","TUV","WXYZ"};    public List<NumItem> getData(){        nums = new ArrayList<NumItem>();        for (int i = 0; i < 9; i++) {            nums.add(new NumItem(String.valueOf(i+1),letters[i]));        }        nums.add(new NumItem("",""));        nums.add(new NumItem("0",""));        nums.add(new NumItem("←",""));        return nums;    }

2.7java生成Recyclerview

    private RecyclerView numPanel;    public void initRecyclerView(){        numPanel = (RecyclerView) findViewById(R.id.num_panel);        RecyclerView.LayoutManager layoutManager = new GridLayoutManager(this,3);        numPanel.setLayoutManager(layoutManager);        numPanel.setHasFixedSize(true);        numPanel.setItemAnimator(new DefaultItemAnimator());        numPanel.addItemDecoration(new DividerGridItemDecoration(this));        numPanel.setAdapter(new NumItemAdapter(getData(),this));    }

自己写按钮逻辑吧。。

禁止系统输入法弹出：

    public void hiddenInputMethod(){        int flags = WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM;        getWindow().addFlags(flags);    }

初始化的时候调用就行了。