一步步实现一个城市选择器.docx
- 文档编号:3401911
- 上传时间:2022-11-22
- 格式:DOCX
- 页数:27
- 大小:261.48KB
一步步实现一个城市选择器.docx
《一步步实现一个城市选择器.docx》由会员分享,可在线阅读,更多相关《一步步实现一个城市选择器.docx(27页珍藏版)》请在冰豆网上搜索。
一步步实现一个城市选择器
一步步实现一个城市选择器
主要包含以下内容:
1、自动定位所在城市
2、热门城市列表展示
3、所有城市列表的展示
4、输入城市名或者城市拼音搜索对应城市
5、右侧的slidebar城市列表导航栏
请大家先下载Demo然后再一边看demo一边看博客。
因为博客里很多代码因为比较简单就不贴了。
首先我们先搭建基本的UI:
分析效果图,我们需要一个顶部titleview,一个搜索框,一个定位功能的view,一个展示热门城市的view,一个侧边栏view和一个listview。
顶部titleView:
这里有一些需要注意的地方:
我们在新建工程的时候,Androidstudio会自动生成一个style作为我们的主题:
--Customizeyourthemehere.-->
android:
theme="@style/AppTheme"
这个默认的主题是带有actionbar的,如果我们要去掉这个actionbar,首先需要把DarkActionBar改为NoActionBar,因为使用AppCompatActivity的时候,Activity必须使用Theme.AppCompat主题及其子主题,所以我们的自定义的HD_NoActionBar样式必须继承这个主题:
--Customizeyourthemehere.-->
windowNoTitle">true windowActionBar">false 然后引用这个style: android: theme="@style/AppTheme.NoActionBar" 接下来写我们的头布局title_view.xml: android=" xmlns: tools=" android: layout_width="match_parent" android: layout_height="wrap_content" android: orientation="vertical"> android: layout_width="match_parent" android: layout_height="? attr/actionBarSize" android: background="@color/light_blue"> android: id="@+id/back" style="@style/Widget.AppCompat.ActionButton" android: layout_width="wrap_content" android: layout_height="match_parent" android: paddingLeft="16dp" android: paddingRight="16dp" android: scaleType="center" android: src="@mipmap/ic_back" tools: ignore="ContentDescription"/> android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_centerInParent="true" android: text="@string/select_city" android: textSize="20sp" android: textColor="@color/white"/> android: layout_width="match_parent" android: layout_height="1dp" android: background="@color/white"/> 布局返回按钮用一个ImageView,title用一个Textview。 然后在我们的主布局里使用标签引入头布局: android=" android: id="@+id/activity_main" android: layout_width="match_parent" android: layout_height="match_parent" android: background="@color/light_blue" android: orientation="vertical"> 现在的效果是这样的: 搜索框布局searchview search_view/xml: android=" xmlns: tools=" android: layout_width="match_parent" android: layout_height="36dp" android: layout_marginBottom="8dp" android: layout_marginLeft="16dp" android: layout_marginRight="16dp" android: layout_marginTop="8dp" android: gravity="center_vertical" android: background="@drawable/search_box_bg"> android: layout_width="wrap_content" android: layout_height="match_parent" android: paddingLeft="8dp" android: paddingRight="8dp" android: src="@mipmap/ic_search" android: scaleType="center" tools: ignore="ContentDescription"/> android: id="@+id/et_search" android: layout_weight="1" android: layout_width="0dp" android: layout_height="match_parent" android: background="@null" android: gravity="center_vertical" android: hint="@string/hint_search_box" android: textColorHint="@color/deep_blue" android: inputType="text" android: singleLine="true" android: textColor="@color/deep_blue" android: textSize="14sp" tools: ignore="RtlHardcoded"/> android: id="@+id/iv_search_clear" android: layout_width="wrap_content" android: layout_height="match_parent" android: paddingLeft="8dp" android: paddingRight="8dp" android: src="@mipmap/ic_search_clear" android: visibility="gone" tools: ignore="ContentDescription"/> 然后在主布局里引入这个布局: 搜索框的布局也非常简单,就不说明了。 现在的效果: 城市列表 接下来的定位城市、热门城市、以及所有城市的列表我们使用一个Listview搞定,让Listview加载三种不同的布局来展示。 定位城市和所有城市列表好说,这个热门城市的UI该怎么做呢? 我们准备使用gridview来做,在listview里嵌套gridview会遇到gridview只能显示一行的问题,我们先重现这个问题,然后再分析怎么解决。 listview需要一个adapter适配器,adapter需要一个数据源,我们的数据源存放在一个db数据库里,所以我们要构建一个数据库操作类,从数据库中取出这些城市然后展示出来。 这一段的代码比较多,前方高能预警(^__^) 我们把要做的事情按步骤划分: 1、导入数据库文件 2、构建City对象,用户存储城市信息 3、创建DBManager用来操作数据库,将查询到的数据传递给adapter 4、编写定位城市、热门城市、所有城市三种不同的item布局 5、编写adapter,在adapter里加载三种item布局 6、编写gridview热门城市的item布局 7、实现gridview的adapter 1、建立assets文件,并把db文件放在assets目录下: 2、City对象 City.Java: publicclassCity{ privateStringname; privateStringpinyin; publicCity(){} publicCity(Stringname,Stringpinyin){ this.name=name; this.pinyin=pinyin; } publicStringgetName(){ returnname; } publicvoidsetName(Stringname){ this.name=name; } publicStringgetPinyin(){ returnpinyin; } publicvoidsetPinyin(Stringpinyin){ this.pinyin=pinyin; } } 数据库操作类: DBManager.java: publicclassDBManager{ privatestaticfinalStringASSETS_NAME="china_cities.db"; privatestaticfinalStringDB_NAME="china_cities.db"; privatestaticfinalStringTABLE_NAME="city"; privatestaticfinalStringNAME="name"; privatestaticfinalStringPINYIN="pinyin"; privatestaticfinalintBUFFER_SIZE=1024; privateStringDB_PATH; privateContextmContext; //初始化 publicDBManager(Contextcontext){ this.mContext=context; DB_PATH=File.separator+"data" +Environment.getDataDirectory().getAbsolutePath()+File.separator +context.getPackageName()+File.separator+"databases"+File.separator; } //保存数据库到本地 @SuppressWarnings("ResultOfMethodCallIgnored") publicvoidcopyDBFile(){ Filedir=newFile(DB_PATH); if(! dir.exists()){ dir.mkdirs(); } FiledbFile=newFile(DB_PATH+DB_NAME); if(! dbFile.exists()){ InputStreamis; OutputStreamos; try{ is=mContext.getResources().getAssets().open(ASSETS_NAME); os=newFileOutputStream(dbFile); byte[]buffer=newbyte[BUFFER_SIZE]; intlength; while((length=is.read(buffer,0,buffer.length))>0){ os.write(buffer,0,length); } os.flush(); os.close(); is.close(); }catch(IOExceptione){ e.printStackTrace(); } } } /** *读取所有城市 *@return */ publicList SQLiteDatabasedb=SQLiteDatabase.openOrCreateDatabase(DB_PATH+DB_NAME,null); Cursorcursor=db.rawQuery("select*from"+TABLE_NAME,null); List Citycity; while(cursor.moveToNext()){ Stringname=cursor.getString(cursor.getColumnIndex(NAME)); Stringpinyin=cursor.getString(cursor.getColumnIndex(PINYIN)); city=newCity(name,pinyin); result.add(city); } cursor.close(); db.close(); Collections.sort(result,newCityComparator()); returnresult; } /** *通过名字或者拼音搜索 *@paramkeyword *@return */ publicList SQLiteDatabasedb=SQLiteDatabase.openOrCreateDatabase(DB_PATH+DB_NAME,null); Cursorcursor=db.rawQuery("select*from"+TABLE_NAME+"wherenamelike\"%"+keyword +"%\"orpinyinlike\"%"+keyword+"%\"",null); List Citycity; while(cursor.moveToNext()){ Stringname=cursor.getString(cursor.getColumnIndex(NAME)); Stringpinyin=cursor.getString(cursor.getColumnIndex(PINYIN)); city=newCity(name,pinyin); result.add(city); } cursor.close(); db.close(); Collections.sort(result,newCityComparator()); returnresult; } /** *a-z排序 */ privateclassCityComparatorimplementsComparator @Override publicintcompare(Citylhs,Cityrhs){ Stringa=lhs.getPinyin().substring(0,1); Stringb=rhs.getPinyin().substring(0,1); returnpareTo(b); } } } 这个类使用SQLiteDatabase来管理数据库,同事写了一个排序类CityComparator用来对城市按照首字母进行排序 定位城市的布局: view_locate_city.xml: android=" xmlns: tools=" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="vertical" android: paddingBottom="8dp" tools: ignore="RtlHardcoded"> style="@style/LetterIndexTextViewStyle" android: text="@string/located_city"/> android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_marginLeft="16dp" android: background="@color/content_bg"> android: id="@+id/layout_locate" android: layout_width="wrap_content" android: layout_height="40dp" android: minWidth="96dp" android: paddingLeft="8dp" android: paddingRight="8dp" android: gravity="center" android: clickable="true" android: background="@drawable/overlay_bg"> android: layout_width="wrap_content" android: layout_height="wrap_content" android: src="@mipmap/ic_locate" tools: ignore="ContentDescription"/> android: id="@+id/tv_located_city" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_marginLeft="8dp" android: text="@string/locating" android: textSize="16sp" android: textColor="@color/white"/> 然后是所有城市的布局: android=" xmlns: tools=" android: layout_width="match_parent" android: layout_height="wrap_content" android: orientation="vertical" tools: ignore="RtlHardcoded"> android: id="@+id/tv_item_city_listview_letter" style="@style/LetterIndexTextViewStyle" android: textSize="18sp" android: clickable="false"/> android: id="@+id/tv_item
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 一步步 实现 一个 城市 选择器
![提示](https://static.bdocx.com/images/bang_tan.gif)