要求
1、内容:请根据课程实操实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换;
2、技术:使用布局(layouts)和分段(fragment),对控件进行点击监听;
(没有做出点击图标改变颜色的效果)
此界面分为三个部分
top:界面最上方的wechat,可在layout使用textview部件居中展示该文字效果。
content:下面四个标签,能够根据底部功能栏的切换而随之切换。可以使用FrameLayout实现该功能,在FrameLayout中包含四个fragment部件对应四个功能栏即可。
bottom:在bottom版块中,进一步分析应将其水平划分为四个LinearLayout,在每一个LinearLayout中应该再垂直划分为两个LinearLayout
想设置的图标在阿里矢量图中可以免费下载
从所在目录中直接拖拽到drawable目录下就可以导入使用
代码
layout
activity_main.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="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
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="wrap_content"
android:background="@color/black">
<LinearLayout
android:id="@+id/LinearLayout_weixinFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="40sp"
android:src="@drawable/chat" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="聊天"
android:textColor="@color/white"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout_weixinContacts"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="40sp"
android:src="@drawable/contacts" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="通讯录"
android:textColor="@color/white"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout_weixinLook"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="40sp"
android:src="@drawable/look" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="朋友圈"
android:textColor="@color/white"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout_weixinMeow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="40sp"
android:src="@drawable/meow" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="喵呜"
android:textColor="@color/white"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
四个fragment.xml
<?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"
tools:context=".weixinFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="40sp"
android:gravity="center"
android:text="这是微信聊天界面" />
</LinearLayout>
<?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"
tools:context=".weixinFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="这是联系人界面"
android:textSize="40sp" />
</LinearLayout>
还有两个也差不多
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="@color/black">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="wechat"
android:textColor="@color/white"
android:gravity="center"
android:textSize="24sp"/>
</LinearLayout>
MainActivity.java
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Fragment weixinFragment = new weixinFragment();
private Fragment weixinContacts = new weixinContacts();
private Fragment weixinLook = new weixinLook();
private Fragment weixinMeow = new weixinMeow();
private FragmentManager fragmentManager;
private View LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
private TextView textView1,textView2,textView3,textView4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
LinearLayout1 = findViewById(R.id.LinearLayout_weixinFragment);
LinearLayout2 = findViewById(R.id.LinearLayout_weixinContacts);
LinearLayout3 = findViewById(R.id.LinearLayout_weixinLook);
LinearLayout4 = findViewById(R.id.LinearLayout_weixinMeow);
textView1 = findViewById(R.id.textView1);
textView2 = findViewById(R.id.textView2);
textView3 = findViewById(R.id.textView3);
textView4 = findViewById(R.id.textView4);
LinearLayout1.setOnClickListener(this);
LinearLayout2.setOnClickListener(this);
LinearLayout3.setOnClickListener(this);
LinearLayout4.setOnClickListener(this);
textView1.setOnClickListener(this);
textView2.setOnClickListener(this);
textView3.setOnClickListener(this);
textView4.setOnClickListener(this);
initFragment();
showFragment(0);
}
private void initFragment(){
fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.content,weixinFragment);
transaction.add(R.id.content,weixinContacts);
transaction.add(R.id.content,weixinLook);
transaction.add(R.id.content,weixinMeow);
transaction.commit();
}
public void hideFragment(FragmentTransaction transaction){
transaction.hide(weixinFragment);
transaction.hide(weixinContacts);
transaction.hide(weixinLook);
transaction.hide(weixinMeow);
}
private void showFragment(int i){
FragmentTransaction transaction = fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(weixinFragment);
textView1.setText("聊天");
break;
case 1:
transaction.show(weixinContacts);
textView2.setText("联系人");
break;
case 2:
transaction.show(weixinLook);
textView3.setText("朋友圈");
break;
case 3:
transaction.show(weixinMeow);
textView4.setText("喵呜");
break;
default:
break;
}
transaction.commit();
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.LinearLayout_weixinFragment:
showFragment(0);
break;
case R.id.LinearLayout_weixinContacts:
showFragment(1);
break;
case R.id.LinearLayout_weixinLook:
showFragment(2);
break;
case R.id.LinearLayout_weixinMeow:
showFragment(3);
break;
default:
break;
}
}
}
界面展示