一、首先我們想要的效果是：

• 在城市索引的列表能夠加個(gè)自定義頭部七兜；
• 有城市索引的字母懸浮塊锯厢；
• 右側(cè)的字母索引導(dǎo)航酥郭；
• 仿ios效果的當(dāng)前位置索引提示框

我們先來(lái)看下效果：

這里寫(xiě)圖片描述

下面的代碼可能有點(diǎn)多懂衩，但是效果卻很不錯(cuò)撞叨，請(qǐng)耐心往下看
這里我是用的IndexableLayout控件做的

如果還是有不清楚的，可以去看我的Demo：CityProject

博客地址：點(diǎn)擊這里

二勃痴、如何使用IndexableLayout：

• 需要加入第三方依賴(lài)庫(kù)：

implementation 'me.yokeyword:indexablerecyclerview:1.3.0'

• 在.xml布局中:

<me.yokeyword.indexablerv.IndexableLayout
        android:id="@+id/indexableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        app:indexBar_selectedTextColor="@color/black"  //右側(cè)導(dǎo)航選中時(shí)的顏色
        app:indexBar_textColor="@color/gray1"   //右側(cè)導(dǎo)航字體顏色
        app:indexBar_layout_width="40dp"        //右側(cè)導(dǎo)航的寬度
        app:indexBar_textSize="14sp"         //右側(cè)導(dǎo)航的字體大小
        app:indexBar_textSpace="5dp" />

• 在Activity中：
  下面注釋寫(xiě)的很清楚了谒所，這里我就不多做說(shuō)明了

public class CityPickerActivity extends AppCompatActivity {
    //IndexableLayout 的適配器
    private ContactAdapter mAdapter;
    //自定義頭部adapter
    private BannerHeaderAdapter mBannerHeaderAdapter;
    //熱門(mén)城市的數(shù)組
    private String[] city = {"東莞","深圳","廣州","溫州","鄭州","金華","佛山","上海","蘇州","杭州","長(zhǎng)沙","中山"};
    private IndexableLayout indexableLayout;
    //熱門(mén)城市的適配器
    private CYBChangeCityGridViewAdapter cybChangeCityGridViewAdapter;
    熱門(mén)城市的集合
    private ArrayList<String> list;
    //返回按鈕
    private ImageView pic_contact_back;
    private Intent intent;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pick_contact);

        initview();
        initAdapter();
        onlisten();
    }

    public void initAdapter(){
        mAdapter = new ContactAdapter(this);        
        indexableLayout.setAdapter(mAdapter);
        //設(shè)置字母提示框?yàn)榉耾s居中
        indexableLayout.setOverlayStyle_Center();
        mAdapter.setDatas(initDatas());
//        indexableLayout.setOverlayStyle_MaterialDesign(Color.RED); 設(shè)置提示框?yàn)榉侣?lián)系人氣泡樣式
        // 全字母排序热康。  排序規(guī)則設(shè)置為：每個(gè)字母都會(huì)進(jìn)行比較排序沛申；速度較慢
        indexableLayout.setCompareMode(IndexableLayout.MODE_FAST);
//        indexableLayout.addHeaderAdapter(new SimpleHeaderAdapter<>(mAdapter, "☆",null, null));

//         構(gòu)造函數(shù)里3個(gè)參數(shù),分別對(duì)應(yīng) (IndexBar的字母索引, IndexTitle, 數(shù)據(jù)源), 不想顯示哪個(gè)就傳null, 數(shù)據(jù)源傳null時(shí),代表add一個(gè)普通的View
//        mMenuHeaderAdapter = new MenuHeaderAdapter("↑", null, initMenuDatas());
//        indexableLayout.addHeaderAdapter(mMenuHeaderAdapter);

        // 這里BannerView只有一個(gè)Item, 添加一個(gè)長(zhǎng)度為1的任意List作為第三個(gè)參數(shù)
        List<String> bannerList = new ArrayList<>();
        bannerList.add("");
        mBannerHeaderAdapter = new BannerHeaderAdapter("↑", null, bannerList);
        indexableLayout.addHeaderAdapter(mBannerHeaderAdapter);
    }

    public void initview(){
        intent = getIntent();
        pic_contact_back = (ImageView) findViewById(R.id.pic_contact_back);
        indexableLayout = (IndexableLayout) findViewById(R.id.indexableLayout);
        indexableLayout.setLayoutManager(new LinearLayoutManager(this));
    }

    public void onlisten(){

        pic_contact_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        mAdapter.setOnItemContentClickListener(new IndexableAdapter.OnItemContentClickListener<UserEntity>() {
            @Override
            public void onItemClick(View v, int originalPosition, int currentPosition, UserEntity entity) {
                if (originalPosition >= 0) {
                    intent.putExtra("info", entity.getNick());
                    setResult(RESULT_OK, intent);
                    finish();
                } else {
                    ToastUtil.showShort(CityPickerActivity.this, "選中Header/Footer:" + entity.getNick() + "  當(dāng)前位置:" + currentPosition);
                }
            }
        });
    }

    /**
     * 自定義的Banner Header
     */
    class BannerHeaderAdapter extends IndexableHeaderAdapter {
        private static final int TYPE = 1;
        //這里傳的參數(shù)上面注釋有
        public BannerHeaderAdapter(String index, String indexTitle, List datas) {
            super(index, indexTitle, datas);
        }

        @Override
        public int getItemViewType() {
            return TYPE;
        }

        @Override
        public RecyclerView.ViewHolder onCreateContentViewHolder(ViewGroup parent) {
            View view = LayoutInflater.from(CityPickerActivity.this).inflate(R.layout.item_city_header, parent, false);
            VH holder = new VH(view);
            return holder;
        }

        @Override
        public void onBindContentViewHolder(RecyclerView.ViewHolder holder, Object entity) {
            // 數(shù)據(jù)源為null時(shí), 該方法不用實(shí)現(xiàn)
            VH vh = (VH) holder;
            list=new ArrayList<>();
            for(int i = 0; i<city.length; i++){
                list.add(city[i]);
            }
            System.out.println("------------city"+list);
            cybChangeCityGridViewAdapter=new CYBChangeCityGridViewAdapter(CityPickerActivity.this, list);
            // 綁定adpter
            vh.head_home_change_city_gridview.setAdapter(cybChangeCityGridViewAdapter);
            //熱門(mén)城市的item點(diǎn)擊事件
            vh.head_home_change_city_gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    intent.putExtra("info", list.get(position));
                    System.out.println("aaaaaayyyyyyyyy"+list.get(position));
                    setResult(RESULT_OK, intent);
                    finish();
                }
            });
            //設(shè)置定位城市的點(diǎn)擊事件
            vh.item_header_city_dw.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    intent.putExtra("bendi", MeNow.city);
                    setResult(RESULT_OK, intent);
                    finish();
                }
            });

        }

        private class VH extends RecyclerView.ViewHolder {
            GridView head_home_change_city_gridview;
            TextView item_header_city_dw;
            public VH(View itemView) {
                super(itemView);
                head_home_change_city_gridview =(QGridView)itemView.findViewById(R.id.item_header_city_gridview);
                item_header_city_dw = (TextView) itemView.findViewById(R.id.item_header_city_dw);
            }
        }
    }

    private List<UserEntity> initDatas() {
        List<UserEntity> list = new ArrayList<>();
        // 初始化數(shù)據(jù)，R.array.provinces是城市資源姐军，下面有貼出資源文件代碼
        List<String> contactStrings = Arrays.asList(getResources().getStringArray(R.array.provinces));
        List<String> mobileStrings = Arrays.asList(getResources().getStringArray(R.array.provinces));
        for (int i = 0; i < contactStrings.size(); i++) {
            UserEntity contactEntity = new UserEntity(contactStrings.get(i), mobileStrings.get(i));
            list.add(contactEntity);
        }
        return list;
    }
}

Activity的.xml文件中:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="@color/white"
        android:elevation="3dp"
        >
        <ImageView
            android:id="@+id/pic_contact_back"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/back"
            android:padding="18dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="城市選擇"
            android:layout_gravity="center_vertical"
            android:textColor="@color/black"
            android:textSize="18sp"
            />
    </LinearLayout>

    <me.yokeyword.indexablerv.IndexableLayout
        android:id="@+id/indexableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        app:indexBar_selectedTextColor="@color/black"
        app:indexBar_textColor="@color/gray1"
        app:indexBar_layout_width="40dp"
        app:indexBar_textSize="14sp"
        app:indexBar_textSpace="5dp" />

</LinearLayout>

values目錄下的R.arrays.xml城市資源文件:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <string-array name="provinces">
        <item>上海</item>
        <item>北京</item>
        <item>杭州</item>
        <item>廣州</item>
        ...
    </string-array>
</resources>

BannerHeaderAdapter其實(shí)就是相當(dāng)于IndexableLayout的頭布局铁材，我這里的定位城市和熱門(mén)城市就是通過(guò)添加這個(gè)頭部（BannerHeaderAdapter的item布局）:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="定位城市"
        android:gravity="center_vertical"
        android:paddingLeft="15dp"
        android:textSize="@dimen/text_size_18"
        android:textColor="@color/black"
        />
    <TextView
        android:id="@+id/item_header_city_dw"
        android:layout_width="80dp"
        android:layout_height="35dp"
        android:textColor="@color/black"
        android:gravity="center"
        android:layout_marginLeft="15dp"
        android:background="@drawable/sylayout_shop"
        android:text="東莞"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray2"
        android:layout_margin="15dp"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingBottom="5dp"
        android:paddingLeft="15dp"
        android:paddingRight="30dp"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="@color/black"
            android:text="熱門(mén)城市"/>
        <com.wzg.biswang.util.QGridView
            android:id="@+id/item_header_city_gridview"
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:numColumns="3"
            android:stretchMode="columnWidth"
            android:columnWidth="60dp"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="15dp">
        </com.wzg.biswang.util.QGridView>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray2"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="18sp"
        android:textColor="@color/black"
        android:layout_marginLeft="15dp"
        android:gravity="center_vertical"
        android:text="所有城市"/>
</LinearLayout>

ContactAdapter的適配器也就是IndexableLayout的Adapter，這里必須繼承IndexableAdapter<UserEntity>,你也可以直接把這段代碼復(fù)制下來(lái) :

public class ContactAdapter extends IndexableAdapter<UserEntity> {
    private LayoutInflater mInflater;

    public ContactAdapter(Context context) {
        mInflater = LayoutInflater.from(context);
    }

//設(shè)置懸浮塊的layout
    @Override
    public RecyclerView.ViewHolder onCreateTitleViewHolder(ViewGroup parent) {
        View view = mInflater.inflate(R.layout.item_index_contact, parent, false);
        return new IndexVH(view);
    }
//設(shè)置懸浮塊下面的layout
    @Override
    public RecyclerView.ViewHolder onCreateContentViewHolder(ViewGroup parent) {
        View view = mInflater.inflate(R.layout.item_contact, parent, false);
        return new ContentVH(view);
    }

//設(shè)置懸浮塊的數(shù)據(jù)
    @Override
    public void onBindTitleViewHolder(RecyclerView.ViewHolder holder, String indexTitle) {
        IndexVH vh = (IndexVH) holder;
        vh.tv.setText(indexTitle);
    }

//設(shè)置懸浮塊下面的數(shù)據(jù)
    @Override
    public void onBindContentViewHolder(RecyclerView.ViewHolder holder, UserEntity entity) {
        ContentVH vh = (ContentVH) holder;
        vh.tvName.setText(entity.getNick());
        vh.tvMobile.setText(entity.getMobile());
    }

    private class IndexVH extends RecyclerView.ViewHolder {
        TextView tv;

        public IndexVH(View itemView) {
            super(itemView);
            tv = (TextView) itemView.findViewById(R.id.tv_index);
        }
    }

    private class ContentVH extends RecyclerView.ViewHolder {
        TextView tvName, tvMobile;

        public ContentVH(View itemView) {
            super(itemView);
            tvName = (TextView) itemView.findViewById(R.id.tv_name);
            tvMobile = (TextView) itemView.findViewById(R.id.tv_mobile);
        }
    }
}

懸浮塊的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <TextView
        android:id="@+id/tv_index"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f9f9f9"
        android:paddingBottom="8dp"
        android:paddingLeft="24dp"
        android:paddingTop="8dp"
        android:textColor="@color/gray"
        android:text="A"
        android:textStyle="bold"
        android:textSize="14sp" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0.8dp"
        android:background="#f0f0f0" />
</FrameLayout>

懸浮塊下面的xml文件也就是item布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="5dp"
    android:background="?attr/selectableItemBackground"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="5dp">

    <ImageView
        android:visibility="gone"
        android:id="@+id/img_avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="16dp"
        android:src="@drawable/bsw_gray" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/img_avatar"
        tools:text="張三"
        android:textColor="#373737"
        android:textSize="16sp" />

    <TextView
        android:visibility="gone"
        android:id="@+id/tv_mobile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_name"
        android:layout_marginTop="12dp"
        android:layout_toRightOf="@id/img_avatar"
        tools:text="18712345678"
        android:textColor="#969696" />

</RelativeLayout>

熱門(mén)城市的GridView奕锌，普通的Adapter類(lèi)我就不用多作解釋了相信大家都能看懂：

public class CYBChangeCityGridViewAdapter extends BaseAdapter{
    private List<String> list;
    private Context context;
    private LayoutInflater inflater;

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

    @Override public int getCount() {
        return list.size();
    }

    @Override public Object getItem(int position) {
        return list.get(position);
    }

    @Override public long getItemId(int position) {
        return position;
    }

    @Override public View getView(final int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder=null;
        if(convertView==null){
            convertView=inflater.inflate(R.layout.item_gridview_cyb_change_city,null);
            viewHolder=new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        }else {
            viewHolder=(ViewHolder)convertView.getTag();
        }
        viewHolder.item_gridview_cyb_change_city_tv.setText(list.get(position));
        return convertView;
    }

    class ViewHolder{
        private TextView item_gridview_cyb_change_city_tv;
        public ViewHolder(View view){
            item_gridview_cyb_change_city_tv=(TextView)view.findViewById(R.id.item_gridview_cyb_change_city_tv);
        }
    }
}

熱門(mén)城市GridView的item布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:descendantFocusability="blocksDescendants"
              android:layout_width="match_parent"
              android:layout_height="40dp">
<TextView
    android:id="@+id/item_gridview_cyb_change_city_tv"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@drawable/sylayout_shop"
    android:gravity="center"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    android:textSize="13dp"
    android:layout_marginTop="5dp"
    android:text="廣州"/>
</RelativeLayout>

好了著觉，到此就結(jié)束了，趕緊去試試把惊暴！