Android城市索引含定位和熱門城市
一、首先我們想要的效果是：
在城市索引的列表能夠加個(gè)自定義頭部；
有城市索引的字母懸浮塊；
右側(cè)的字母索引導(dǎo)航；
仿ios效果的當(dāng)前位置索引提示框
我們先來看下效果：
下面的代碼可能有點(diǎn)多，但是效果卻很不錯(cuò)，請(qǐng)耐心往下看，這里是用的IndexableLayout控件做的。
二、如何使用IndexableLayout：
需要加入第三方依賴庫：
implementation 'me.yokeyword:indexablerecyclerview:1.3.0'在.xml布局中:
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中：下面注釋寫的很清楚了，這里我就不多做說明了
public class CityPickerActivity extends AppCompatActivity {//IndexableLayout 的適配器private ContactAdapter mAdapter;//自定義頭部adapterprivate BannerHeaderAdapter mBannerHeaderAdapter;//熱門城市的數(shù)組private String[] city = {"東莞","深圳","廣州","溫州","鄭州","金華","佛山","上海","蘇州","杭州","長沙","中山"};private IndexableLayout indexableLayout;//熱門城市的適配器private CYBChangeCityGridViewAdapter cybChangeCityGridViewAdapter;熱門城市的集合private ArrayListlist; //返回按鈕private ImageView pic_contact_back;private Intent intent;@Overrideprotected 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è)長度為1的任意List作為第三個(gè)參數(shù)ListbannerList = 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() {@Overridepublic void onClick(View v) {finish();}});mAdapter.setOnItemContentClickListener(new IndexableAdapter.OnItemContentClickListener() { @Overridepublic 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);}@Overridepublic int getItemViewType() {return TYPE;}@Overridepublic 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;}@Overridepublic 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; ilist.add(city[i]);}System.out.println("------------city"+list);cybChangeCityGridViewAdapter=new CYBChangeCityGridViewAdapter(CityPickerActivity.this, list);// 綁定adptervh.head_home_change_city_gridview.setAdapter(cybChangeCityGridViewAdapter);//熱門城市的item點(diǎn)擊事件vh.head_home_change_city_gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic 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() {@Overridepublic 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 ListinitDatas() { Listlist = new ArrayList<>(); // 初始化數(shù)據(jù)，R.array.provinces是城市資源，下面有貼出資源文件代碼ListcontactStrings = Arrays.asList(getResources().getStringArray(R.array.provinces)); ListmobileStrings = 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文件中:
xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">android:layout_width="match_parent"android:layout_height="50dp"android:orientation="horizontal"android:background="@color/white"android:elevation="3dp">android:id="@+id/pic_contact_back"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/back"android:padding="18dp"/>android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="城市選擇"android:layout_gravity="center_vertical"android:textColor="@color/black"android:textSize="18sp"/>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" />
values目錄下的R.arrays.xml城市資源文件:
- 上海
- 北京
- 杭州
- 廣州
...
BannerHeaderAdapter其實(shí)就是相當(dāng)于IndexableLayout的頭布局，我這里的定位城市和熱門城市就是通過添加這個(gè)頭部（BannerHeaderAdapter的item布局）:
android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content">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"/>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="東莞"/>android:layout_width="match_parent"android:layout_height="1dp"android:background="@color/gray2"android:layout_margin="15dp"/>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">android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="18sp"android:textColor="@color/black"android:text="熱門城市"/>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">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"/>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="所有城市"/>
ContactAdapter的適配器也就是IndexableLayout的Adapter，這里必須繼承IndexableAdapter
public class ContactAdapter extends IndexableAdapter{ private LayoutInflater mInflater;public ContactAdapter(Context context) {mInflater = LayoutInflater.from(context);}//設(shè)置懸浮塊的layout@Overridepublic RecyclerView.ViewHolder onCreateTitleViewHolder(ViewGroup parent) {View view = mInflater.inflate(R.layout.item_index_contact, parent, false);return new IndexVH(view);}//設(shè)置懸浮塊下面的layout@Overridepublic RecyclerView.ViewHolder onCreateContentViewHolder(ViewGroup parent) {View view = mInflater.inflate(R.layout.item_contact, parent, false);return new ContentVH(view);}//設(shè)置懸浮塊的數(shù)據(jù)@Overridepublic void onBindTitleViewHolder(RecyclerView.ViewHolder holder, String indexTitle) {IndexVH vh = (IndexVH) holder;vh.tv.setText(indexTitle);}//設(shè)置懸浮塊下面的數(shù)據(jù)@Overridepublic 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文件：
android:layout_width="match_parent"android:layout_height="wrap_content">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" />android:layout_width="match_parent"android:layout_height="0.8dp"android:background="#f0f0f0" />
懸浮塊下面的xml文件也就是item布局：
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">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" />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" />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" />
熱門城市的GridView，普通的Adapter類我就不用多作解釋了相信大家都能看懂：
public class CYBChangeCityGridViewAdapter extends BaseAdapter{private Listlist; private Context context;private LayoutInflater inflater;public CYBChangeCityGridViewAdapter(Context context,Listlist){ 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);}}}
熱門城市GridView的item布局：
android:orientation="vertical"android:descendantFocusability="blocksDescendants"android:layout_width="match_parent"android:layout_height="40dp">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="廣州"/>
源碼地址：
https://github.com/TroyZou/CityProject
到這里就結(jié)束啦。
評(píng)論
圖片
表情