MySQL实用教程(新体系.综合应用实例视频)(第4版）-网络文档-P3.4 主页丰富开发.docx

P3.4主页丰富开发 P3.4.1主页界面设计 完整的主页界面由“商品广告栏”、“类别频道栏”、“搜索登录栏”和“商品信息列表”这4 个部分构成，整体釆用垂直方向的线性布局，对应UI设计文件为activity_home.xml,代码如下： <LinearLayout xmlns:android=nhttp://schemas?/apk/res/androidn android:orientation=,,verticaln > //界面整体放在— 垂直线性布局中 <shop.Banner... /> 〃①商品广告栏 <androidx.recyclerview? widget , RecyclerView.? ./> //②类别频道栏 <RelativeLayout.?.> 〃③搜索登录栏 <AutoCompleteTextView... /> //搜索框 <Button... /> 〃搜索按钮 <Button... /> //登录按钮 </RelativeLayout> // (a) <ListView.?. 〃④商品信息列表 android:layout_height=n41Odp" /> // (b) </LinearLayout> 其中： vRelativeLayout... >...</RelativeLayout>:搜索登录栏包括_个搜索框和两个按钮，它 们横向排列在一个相对布局中。 <ListView... android:layout_height="410dp" />：这个 ListView 也就是前面 P3.3.4 节 开发的列表视图在前端页面上所对应的UI元素,设计时要根据页面运行的实际尺寸设定其高度, 使里面的商品条目项适当地填满屏幕相应区域，更多的条目项可以滚动显示。 为了使主页设计代码的结构看起来明晰，这里我们先省略掉每个界面元素内部具体的UI代 码，下图P3.38是主页运行时的界面效果，其中可看到各界面元素所在的位置和标注序号(①? ④与代码中的对应)。 亘亙［成菱:我瓦宜蠶［五至二亙豆［贏I/时? 类别搜索元/斤,人■ ■。斤r 果有出，邑*■*—商品商 品 信 息 列 表 亘亙［成菱:我瓦宜蠶［五至二亙豆［贏I/时? 类别 搜索 元/斤,人■ ■。斤 r 果有出，邑* ■*—商品 商 品 信 息 列 表 簡山梨5斤箱装特大果 ”7.90 *29.80 库尔勒香梨10斤箱装 中国传统三大名梨之茵.以其汁 多味認且員有润肺止暇作用而相 名中外° 烟台红富士苹果10斤箱装 烟台苹果雜培历史悠久，独特的 口&源自于山东这一独特的地理 环瓦 ③搜索 商品条目项 图P3.38主页运行界面及构成 P3.4.2商品广告栏 主页顶部的商品广告栏是一个轮番显示商家热推商品广告图片的轮播条，但Android中并 没有现成的轮播条控件，我们考虑用自定义控件的方法自己制作一个。 [.界面蝸 上部图片翻页功能我们使用Android中的ViewPager （翻页视图）控件实现，底部指示当前 图片所在次序的圆点指示器使用RadioGroup和RadioButton控件组合实现。 在工程layout目录下创建自定义轮播条控件的bannenxml文件，设计内容如下： <RelativeLayout xmlns:android=nhttp://schemas?/apk/res/android n android:layout_width=nmatch_parent” android:丄 ayout_height="niatch_parent" android:orientation=,,vertical,* > <androidx. viewpager. widget . ViewPager / / 实现上部 的图片 翻页 android: id=n @+id/myViewPager *' android: layout_width=,,match_j）arent11 android: layout_height=,'match_parentM /> <RadioGroup //实现底部的圆点指示 器 android:id=n @+id/myRadioGroupn android: layout_width=,,wrap_content11 android:丄 ayout_height="wrap_cont:ent” android:paddingBo11om= n 2 dp n android:orientation=,'horizontaln android:layout_alignParentBottom=Mtruen android:layout_centerHorizontal=ntruen /> </RelativeL