Android城市索引含定位和热门城市

龙旋

共 7594字,需浏览 16分钟

 ·

2022-06-07 23:10

一、首先我们想要的效果是:


  • 在城市索引的列表能够加个自定义头部;

  • 有城市索引的字母悬浮块;

  • 右侧的字母索引导航;

  • 仿ios效果的当前位置索引提示框


我们先来看下效果:



下面的代码可能有点多,但是效果却很不错,请耐心往下看,这里是用的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"  //右侧导航选中时的颜色        app:indexBar_textColor="@color/gray1"   //右侧导航字体颜色        app:indexBar_layout_width="40dp"        //右侧导航的宽度        app:indexBar_textSize="14sp"         //右侧导航的字体大小        app:indexBar_textSpace="5dp" />


  • 在Activity中:下面注释写的很清楚了,这里我就不多做说明了

public class CityPickerActivity extends AppCompatActivity {    //IndexableLayout 的适配器    private ContactAdapter mAdapter;    //自定义头部adapter    private BannerHeaderAdapter mBannerHeaderAdapter;    //热门城市的数组    private String[] city = {"东莞","深圳","广州","温州","郑州","金华","佛山","上海","苏州","杭州","长沙","中山"};    private IndexableLayout indexableLayout;    //热门城市的适配器    private CYBChangeCityGridViewAdapter cybChangeCityGridViewAdapter;    热门城市的集合    private ArrayList 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); //设置字母提示框为仿os居中 indexableLayout.setOverlayStyle_Center(); mAdapter.setDatas(initDatas());// indexableLayout.setOverlayStyle_MaterialDesign(Color.RED); 设置提示框为仿联系人气泡样式 // 全字母排序。排序规则设置为:每个字母都会进行比较排序;速度较慢 indexableLayout.setCompareMode(IndexableLayout.MODE_FAST);// indexableLayout.addHeaderAdapter(new SimpleHeaderAdapter<>(mAdapter, "☆",null, null));
// 构造函数里3个参数,分别对应 (IndexBar的字母索引, IndexTitle, 数据源), 不想显示哪个就传null, 数据源传null时,代表add一个普通的View// mMenuHeaderAdapter = new MenuHeaderAdapter("↑", null, initMenuDatas());// indexableLayout.addHeaderAdapter(mMenuHeaderAdapter);
// 这里BannerView只有一个Item, 添加一个长度为1的任意List作为第三个参数 List 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() { @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() + " 当前位置:" + currentPosition); } } }); }
/** * 自定义的Banner Header */ class BannerHeaderAdapter extends IndexableHeaderAdapter { private static final int TYPE = 1; //这里传的参数上面注释有 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) { // 数据源为null时, 该方法不用实现 VH vh = (VH) holder; list=new ArrayList<>(); for(int i = 0; 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); //热门城市的item点击事件 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(); } }); //设置定位城市的点击事件 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 initDatas() { List list = new ArrayList<>(); // 初始化数据,R.array.provinces是城市资源,下面有贴出资源文件代码 List contactStrings = Arrays.asList(getResources().getStringArray(R.array.provinces)); List 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文件中:

    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其实就是相当于IndexableLayout的头布局,我这里的定位城市和热门城市就是通过添加这个头部(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); }
//设置悬浮块的layout @Override public RecyclerView.ViewHolder onCreateTitleViewHolder(ViewGroup parent) { View view = mInflater.inflate(R.layout.item_index_contact, parent, false); return new IndexVH(view); }//设置悬浮块下面的layout @Override public RecyclerView.ViewHolder onCreateContentViewHolder(ViewGroup parent) { View view = mInflater.inflate(R.layout.item_contact, parent, false); return new ContentVH(view); }
//设置悬浮块的数据 @Override public void onBindTitleViewHolder(RecyclerView.ViewHolder holder, String indexTitle) { IndexVH vh = (IndexVH) holder; vh.tv.setText(indexTitle); }
//设置悬浮块下面的数据 @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文件:

    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 List list;    private Context context;    private LayoutInflater inflater;
public CYBChangeCityGridViewAdapter(Context context,List 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); } }}


热门城市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


到这里就结束啦。

浏览 89
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报