微信网页单页面设计 第1篇
调试基础库>=
微信客户端版本>=
自定义的页面.json:
两者的区别就是,全局配置放在文件里,单页面配置放在自定义页面配置文件里。
以下说下几个要点:
1、自定义导航栏文本,是否显示返回,是否显示返回首页,导航栏高度。
2、 statusBarHeight
,用来获取手机状态栏的高度,这个需要在全局中的 onLaunch
,调用 获取,
navigationBarHeight
+ 默认的高度,这个是设定整个导航栏的高度。
3、还有注意的,在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx。
4、因为自定义导航栏每个页面都要写,所以把导航栏封装了公共组件,这样只需要在每个页面引入即可。
如下是封装的导航栏组件:
微信网页单页面设计 第2篇
在layout文件中新建一个.xml文件,命名为,布局(RootTag)设置为LinearLayout,创建完成后拖入一个TextView空间至LinearLayout下 在code界面设置字体大小、颜色及背景颜色等
代码解析
设置完成后效果图如下
imageView选择如下 在code页面设置字体和相对布局等
代码解析
设置完成后效果图如下
主题界面布局仍为LinearLayout,但布局组件排列方式为vertical(垂直) 在控件搜索栏中搜索include,拖两个进入LinearLayout中,并分别选择top,bottom界面引入,之后向LinearLayout中拖入FragmentContainerView用于页面内容显示 在code页面代码设置如下
代码解析
在layout中新建四个.xml文件命名分别为fragment_first到fragment_forth,布局Root Tag均为LinearLayout
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
微信网页单页面设计 第3篇
1.制作底部导航栏
bottom平均分成四块,每块由一个图片和一个文字构成。可以用水平的LinearLayout中再包裹一个竖直的LinearLayout,被包裹的每个LinearLayout里包含一个ImageButton和TextView控件。
准备两组八张图标存放在res-drawable。
添加配置代码:
代码解析:
外部LinearLayout:android:orientation=“horizontal”,布局中组件的排列方式,有horizontal(水平)和vertical(垂直)两种方式。
内部ImageView:tools:srcCompat=_@drawable/tab_weixin_normal_,vector绘制图片的地址。
功能说明(布局展示):
2.制作顶部的,在res-layout新建一个xml文件:
的配置代码:
代码解析:
android:id=_@+id/textView2_,为组件设置一个资源id,在java文件中可以通过findViewById(id)找到该组件。
android:layout_width=“wrap_content”,布局的宽度,通常不直接写数字,用wrap_content(组件实际大小),fill_parent或者match_parent填满父容器。
android:layout_height=“wrap_content”,布局的高度,参数同上。
android:layout_weight=“1”,用来等比例地划分区域。
android:background=_@color/purple_200_,为组件设置一个背景图片,或者直接用颜色覆盖。
android:gravity=“center”,表示textView中的文字相对于TextView的对齐方式。
android:text=“微信”,要显示的文字。
android:textColor=_@color/black_,设置文字的颜色。
android:textSize=“30sp” />,设置文字的大小。
功能说明(布局展示):
的配置
添加代码:
代码解析:
相关的属性作用和以及类似。
功能说明(布局展示):
对主页面显示的内容布局。整个主页面使用竖直的LinerLayout,将和导入,以及中间内容content(对应Fragment)。
4.创建Fragment
在java目录下创建四个fragment类,WeChatBlankFragment(微信)、FriBlankFragment(朋友)、FoundBlankFragment(发现)、MeBlankFragment(我),系统会自动在res-layout目录下生成四个对应的xml文件(可自主命名),对应bottom的四个按钮。
以FriBlankFragment(朋友)为例,配置相关代码
配置FriBlankFragment对应的xml文件代码
5.配置MainActivity
声明所需要的变量
代码解析:
Fragment变量:对应创建的Fragment ,FragmentManager变量:管理Fragment的类 ImageView变量:对应之前创建的ImageView,LinearLayout变量:对应之前创建的LinearLayout
利用FragmentManager对Fragment进行管理,实现页面切换
将所有的Fragment添加进去:
页面的切换(功能):
为了使所有Fragment不会发生重叠,将所有Fragment都隐藏(功能):
完成事件的触发
事件触发代码: