一、APP门户设计要求
1、内容:请根据课程实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换;
2、技术:使用布局(layouts)和分段(fragment),对控件进行点击监听;
二、UI界面设计
2.1制作顶部图标文件top.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="微信"
android:textColor="@color/white"
android:textSize="32sp" />
</LinearLayout>
top.xml设置效果为:
在微信界面顶部的中间位置设置“微信”中文标识,颜色为白色,背景为黑色背景。
其中xml文件中代码的意义为:
(1)android:layout_width=“wrap_content”
width表示top布局的宽度,用wrap_content(组件实际大小),fill_parent或者match_parent填满父容器;
(2)android:layout_height=“wrap_content”
width表示top布局的高度,用wrap_content(组件实际大小),fill_parent或者match_parent填满父容器;
(3)android:layout_height=“wrap_content”
width表示top布局的高度,用wrap_content(组件实际大小),fill_parent或者match_parent填满父容器;
(4)android:layout_weight=“1”
layout_weight = 1表示平均分配长度无法充满父布局;
(5)android:background="#000000"
background表示为组件设置一个背景颜色,结合现实app,我们采用黑色背景白色文字书写;
(6)android:gravity=“center”
gravity表示textView中的文字相对于TextView的对齐方式,中心对齐;
(7)android:text=“微信”
text表示top中要显示的文字“微信”;
(8)android:textColor="@color/white"
结合(5),我们设置“微信”文字的颜色为白色(背景为黑色);
2.2制作底部按键文件bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#2b2b2b"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/tabweixin"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/duihua" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/iconText1"
android:textColor="@color/white"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tabFriend"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/pengyoufill" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/iconText2"
android:textColor="@color/white"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tabSocial"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/tongxunlutianchong" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#F44336"
android:gravity="center"
android:text="@string/iconText3"
android:textColor="@color/white"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/tabSettle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/shezhi" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/iconText4"
android:textColor="@color/white"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
其中:
(1)LinearLayout
android:orientation=“horizontal”表示水平排列;
(2)ImageView
表示对内部图片的高度和宽度的处理方式,详见代码说明;
2.3 activity_main.xml 文件的配置
activity_main.xml 文件表示对主页面显示的内容布局。我们要将制作好的top.xml和bottom.xml文件导入进来,除了顶部图像和底部按钮之外,我们还需要写一个中间内容content,content文本表示中间界面的介绍,content是应对Fragment,所以要使用FrameLayout作为容器。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="vertical"
tools:context=".MainActivity">
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>
2.4配置Fragment类(以第一个片段为例)
public class weixinFragment extends Fragment {
public weixinFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_weixin, container, false);
}
}
以微信界面为例,将Fragment文件底部的函数改成R.layout.fragment_weixin用来将weixin.xml文件与bottom.xml和top.xml连接起来。后面三个按键相类似。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BlankFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/content1"
android:textSize="48sp"
tools:text="@string/content1" />
</FrameLayout>
2.5控制逻辑部分
1.定义fragment对象
// 定义四个tab的实例
private Fragment weixinFragment=new weixinFragment();
private Fragment tongxunluFragment=new tongxunluFragment();
private Fragment faxianFragment=new faxianFragment();
private Fragment shezhiFragment=new shezhiFragment();
2.将四个按键实例放入manager栈中
// 将四个tab实例,压入到FragmentManager栈中
private void initFragment() {
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.id_content, weiixn);
transaction.add(R.id.id_content, tongxunlu);
transaction.add(R.id.id_content, faxian);
transaction.add(R.id.id_content, shezhi);
transaction.commit();
hideFragment(transaction);
}
3.隐藏fragment
由于系统界面启动时,我们默认隐藏4个fragment片段
// 隐藏四个fragment
private void hideFragment(FragmentTransaction transaction){
transaction.hide(tab1);
transaction.hide(tab2);
transaction.hide(tab3);
transaction.hide(tab4);
}
4.存储bottom中4个LinearLayout的对象
// 声明存储bottom中四个LinearLayout的对象
private LinearLayout LinearLayout1;
private LinearLayout LinearLayout2;
private LinearLayout LinearLayout3;
private LinearLayout LinearLayout4;
private TextView text1;
private TextView text2;
private TextView text3;
private TextView text4;
private ImageView imageWeixin;
private ImageView imagetongxunlu;
private ImageView imagefaxian;
private ImageView imageshezhi;
2.6设置监听
1.初始化监听函数
// 初始化监听事件
private void initEvent() {
LinearLayout1.setOnClickListener(this);
LinearLayout2.setOnClickListener(this);
LinearLayout3.setOnClickListener(this);
LinearLayout4.setOnClickListener(this);
}
2.重写监听函数
public void onClick(View v) {
//用户点击任一按钮时,将所有按钮重置为原来的颜色
resetImage();
switch (v.getId()){
case R.id.tab_weixin:
setSelect(0);
break;
case R.id.tab_tongxunlu:
setSelect(1);
break;
case R.id.tab_faxian:
setSelect(2);
break;
case R.id.tab_shezhi:
setSelect(3);
break;
default:
break;
}
}
3.定义监听函数setSlect
// 定义监听的处理函数
private void setSelect(int i){
FragmentTransaction transaction = fm.beginTransaction();
// 检测到点击事件,则隐藏所有片段,仅显示用户点击的片段
hideFragment(transaction);
switch (i){
case 0:
transaction.show(weixinFragment);
text1.setTextColor(Color.parseColor("#07C160"));
imageView.setImageResource(R.drawable.duihua2);
break;
case 1:
transaction.show(tongxunluFragment);
text2.setTextColor(Color.parseColor("#07C160"));
imageView2.setImageResource(R.drawable.pengyoufill2);
break;
case 2:
transaction.show(faxianFragment);
text3.setTextColor(Color.parseColor("#07C160"));
imageView3.setImageResource(R.drawable.tongxunlutianchong2);
break;
case 3:
transaction.show(shezhiFragment);
text4.setTextColor(Color.parseColor("#07C160"));
imageView4.setImageResource(R.drawable.shezhi2);
break;
default:
break;
}
transaction.commit();
}
4.定义清空函数
// 定义将所有图片与文字重置为原来颜色的函数
public void resetImgText() {
text1.setTextColor(Color.parseColor("#FFFFFF"));
text2.setTextColor(Color.parseColor("#FFFFFF"));
text3.setTextColor(Color.parseColor("#FFFFFF"));
text4.setTextColor(Color.parseColor("#FFFFFF"));
imageView.setImageResource(R.drawable.duihua);
imageView2.setImageResource(R.drawable.pengyoufill);
imageView3.setImageResource(R.drawable.tongxunlutianchong);
imageView4.setImageResource(R.drawable.shezhi);
}
5.调用相关函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 取消标题栏
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
// 调用相关函数
initFragment();
initView();
initEvent();
}
三、运行效果
1、打开APP(绿色光标)
2、点击按钮显示“发现”界面(绿色光标)
四、代码仓库地址
https://gitee.com/qdasdzz/wechat-interface-design.git