RecyclerView打造一个密码面板

旧城等待， 2022-06-13 13:29 181阅读 0赞

## **1、效果图及思路** ##

![这里写图片描述][SouthEast]  
[回删键素材][Link 1]

*  1、使用GridLayout的布局管理器，变为12宫格
 *  2、每个item是两个textview，一大一下
 *  3、下面三个需要一些特殊处理，这个Recyclerview的Adapter代码吧
 *  4、分割线–使用鸿洋大神的分割线代码[Android RecyclerView 使用完全解析 体验艺术般的控件][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"?>
    
    <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);
        }

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

[SouthEast]: /images/20220613/753dcffd999643eca0bd74db17207d8d.png
[Link 1]: http://www.iconfont.cn/search/index?searchType=icon&q=back&page=15
[Android RecyclerView _]: http://blog.csdn.net/lmj623565791/article/details/45059587