利用PopupWindow和RecyclerView来实现头像的选择（在电视上选择头像）

在上两篇文章中我们都已经了解了如何在手机上进行头像选择和圆形头像的实现，但是有一点昨天晚上突然发现小弟我悲催了啊，因为我们公司做的是电视上的项目，电视上一没有图库，二没有摄像头照相，我擦这回这个头像选择功能怎么实现啊，和产品一说他说要用本地美工给的图片来给用户一个列表选择头像。

那么问题来了如何不利用本地图库和在没有照相功能的电视上来做呢，于是我又写了个demo，没办法谁让程序员就是天生写demo的呢。

先说说大体的思路很简单：

1、当用户点击选择头像的时候应该弹出一个窗体这个就用popupWindow实现

2、popupWindow里边应该填充一个View，这里用RecyclerView来实现加载多个横向的条目

3、在RecyclerView里边添加子item的点击监听，当item被点击的时候，我们要把popupWindow关闭，并且让点击的头像显示到ImageView这个控件上

4、剩下的细节处理了。定义一个标记记录当前选择的位置，当下次进来的时候头像是上一次选择的这就用到了SharedPreferences

下面我们看一下布局文件:

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/person_head1"
        android:id="@+id/iv"/>
    <Button  
        android:id="@+id/button"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="选择头像" />  

</LinearLayout>

main2.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="match_parent"
    android:gravity="center"
    android:background="#FFBBFFBB"
    android:orientation="horizontal" >
<-- 这里可以直接用RecyclerView->
<com.open.androidtvwidget.recycle.RecyclerViewTV
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:id="@+id/rv">
    
    
</com.open.androidtvwidget.recycle.RecyclerViewTV>
</LinearLayout>

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="match_parent"
    android:gravity="center"
    android:layout_marginLeft="30dp"
    android:orientation="horizontal" >
    <ImageView
        android:id="@+id/iv_item"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/person_head1"/>

</LinearLayout>
接下来我们看看MainActivity

import com.example.demoima.UserListAdapter.OnItemClickLitener;
import com.open.androidtvwidget.recycle.LinearLayoutManagerTV;
import com.open.androidtvwidget.recycle.RecyclerViewTV;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.widget.LinearLayoutManager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;
import android.widget.PopupWindow;
import android.widget.Toast;

public class MainActivity extends Activity {
    // 头像图片
    private int[] mThumbIds = { R.drawable.person_head1,
            R.drawable.person_head2, R.drawable.person_head3,
            R.drawable.person_head4, R.drawable.person_head5,
            R.drawable.person_head6, R.drawable.person_head7,
            R.drawable.person_head8 };
    private Context mContext = null;
    //TV上可以获取焦点的RecyclerView 其实用RecyclerView就可以
    private RecyclerViewTV rv;
    private ImageView iv;
    //当前选择头像的位置
    private int selectPosition;
    private SharedPreferences sp;
    private PopupWindow popupWindow;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
        mContext = this;
        //将被点击的selectPosition获得出来
        sp = getSharedPreferences("selectPosition", MODE_PRIVATE);
        Button button = (Button) findViewById(R.id.button);
        //当用户点击选择头像按钮的时候弹出PopupWindow
        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {

                showPopupWindow(view);
            }
        });
        //当选择完头像后，我们关闭界面再一次打开的时候要求显示的你上一次选中的头像，如果以前没有选择的话，头像默认选择数组中第0个索引的位置
        iv.setImageResource(mThumbIds[sp.getInt("selectPosition", 0)]);

    }
    /**
     * PopupWindow展示
     * @param view
     */
    private void showPopupWindow(View view) {

        // 一个自定义的布局，作为显示的内容
        View contentView = LayoutInflater.from(mContext).inflate(
                R.layout.main2, null);
        //用RecyclerView来横向显示头像列表
        rv = (RecyclerViewTV) contentView.findViewById(R.id.rv);
        testRecyclerViewLinerLayout(LinearLayoutManager.HORIZONTAL);
        //设置popupWindow的宽和高
        popupWindow = new PopupWindow(contentView, LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT, true);
        //该方法是让popupWindow可触摸点击
        popupWindow.setTouchable(true);
        //处理拦截事件冲突
        popupWindow.setTouchInterceptor(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                Log.i("mengdd", "onTouch : ");
                // 这里如果返回true的话，touch事件将被拦截
                // 拦截后 PopupWindow的onTouchEvent不被调用，这样点击外部区域无法dismiss
                return false;
                
            }
        });

        // 如果不设置PopupWindow的背景，无论是点击外部区域还是Back键都无法dismiss弹框
        // 这里在系统源码中popupWindow被默认设置了一个全屏透明的背景导致不可点击，所以我们要把它覆盖掉
        popupWindow.setBackgroundDrawable(new ColorDrawable(0xffffff));
        // 设置好参数之后再show
        popupWindow.showAsDropDown(view);

    }
    /**
     * 显示RecyclerView
     * @param orientation
     */
    private void testRecyclerViewLinerLayout(int orientation) {
        LinearLayoutManagerTV layoutManager = new LinearLayoutManagerTV(this);
        // 保持一个位置（上，下头，尾的差距填补).
        layoutManager.setOrientation(orientation);
        rv.setLayoutManager(layoutManager);
        rv.setFocusable(true);
        //初始化recyclerViewAdapter，其中第一个参数是要展示条目的数量，第二个上下文
        UserListAdapter recyclerViewAdapter = new UserListAdapter(mThumbIds.length,
                getApplicationContext());
        //设置数据适配器
        rv.setAdapter(recyclerViewAdapter);
        //自定义recycleView的item点击事件
        //因为RecyclerView自身没有子item的点击事件，所以我们要在他的adapter内自己自定义他的点击事件
        recyclerViewAdapter.setOnItemClickLitener(new OnItemClickLitener() {

            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(mContext, "当前位置" + position, 0).show();
                //选中后根据选中的位置来显示数组中头像的具体是哪一张
                iv.setImageResource(mThumbIds[position]);
                //将当前被选中的位置赋值给selectPosition
                selectPosition = position;
                //然后把selectPosition放到sp中存起来
                Editor edit = sp.edit();
                edit.putInt("selectPosition", selectPosition);
                edit.commit();
                //当选择头像后，popupWindow应该关闭掉
                popupWindow.dismiss();

            }
        });
    }

}

下面再看看Adapter：

package com.example.demoima;

import java.util.ArrayList;
import java.util.List;




import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.RecyclerView.ViewHolder;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class UserListAdapter extends RecyclerView.Adapter<UserListAdapter.MyViewHolder> {
    private final List<String> labels;
    private LayoutInflater mLayoutInflater;
    private Context context;
    //用户头像数组
    private int[] mThumbIds = { R.drawable.person_head1,
            R.drawable.person_head2, R.drawable.person_head3,
            R.drawable.person_head4, R.drawable.person_head5,
            R.drawable.person_head6, R.drawable.person_head7,
            R.drawable.person_head8 };
    //定义子条目被选择的接口
    public interface OnItemClickLitener {
        
        void onItemClick(View view, int position);

    }

    private OnItemClickLitener mOnItemClickLitener;
    //设置会掉方法
    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }


    public UserListAdapter(int count, Context context) {
        this.labels = new ArrayList<String>(count);
        mLayoutInflater = LayoutInflater.from(context);
        for (int i = 0; i < count; i++) {
            labels.add(String.valueOf(i));
        }
    }

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

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        // TODO Auto-generated method stub
         // 如果设置了回调，则设置点击事件
        holder.iv_item.setImageResource(mThumbIds[position]);
        if (mOnItemClickLitener != null)
        {
            holder.itemView.setOnClickListener(new OnClickListener()
            {
                @Override
                public void onClick(View v)
                {
                    int pos = holder.getLayoutPosition();
                    mOnItemClickLitener.onItemClick(holder.itemView, pos);
                    
                    
                }
            });

        }
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        
        View view = null;
        view = mLayoutInflater.inflate(R.layout.item, parent,
                false);
        MyViewHolder holder = new MyViewHolder(view);
        return holder;
    }
    //viewHolder
    class MyViewHolder extends ViewHolder {
        ImageView iv_item;
        public MyViewHolder(View view) {
            super(view);
            iv_item=(ImageView) view.findViewById(R.id.iv_item);
        }
    }


}

相信童鞋们看完这个一定会感觉其实无论是popupWindow还是RecycleView都不是很难的，这个demo是针对没有图库和摄像头做的，对电视还是很有用的，但是在电视上我们要处理焦点，这是个很蛋疼的问题，后续会说道电视上如何处理焦点的