提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
目录
一、实验内容
实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换。
1.效果图
2.工程目录结构
二、核心技术
使用布局(layout)和分段(fragment),对控件进行点击监听。
三、实验步骤
主要的实验步骤如下
1.Top界面
布局文件(top.xml)
设计界面
2.Button界面
控件关系
资源图片
图片来源阿里巴巴矢量库
布局文件(button.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="65dp"
android:baselineAligned="false"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<LinearLayout
android:id="@+id/linearlayout_1"
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_1"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:contentDescription="@string/app_wechat"
app:srcCompat="@drawable/wechat" />
<TextView
android:id="@+id/textView_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="@string/app_wechat"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearlayout_2"
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_2"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:contentDescription="@string/app_address"
app:srcCompat="@drawable/addr" />
<TextView
android:id="@+id/textView_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/app_address"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearlayout_3"
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_3"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:contentDescription="@string/app_find"
app:srcCompat="@drawable/find" />
<TextView
android:id="@+id/textView_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/app_find"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearlayout_4"
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_4"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:contentDescription="@string/app_me"
app:srcCompat="@drawable/me" />
<TextView
android:id="@+id/textView_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/app_me"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
设计界面
3.activity_main界面
布局文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<include
layout="@layout/top"
app:layout_constraintTop_toTopOf="@+id/fl_content" />
<FrameLayout
android:id="@+id/fl_content"
android:layout_marginTop="55dp"
android:layout_marginBottom="65dp"
android:background="#f0f0f0"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
<include layout="@layout/button"/>
</androidx.constraintlayout.widget.ConstraintLayout>
设计界面
控件关系
4.Fragment部分
需要的类:
布局文件目录:
在类简单的重写onCreateView()方法,其他方法可以按需重写!
(如下,其余三个文件改写方法相同)
package com.firsttest.myapplication;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
public class addrFragment extends Fragment {
private View view;
private String content;
public addrFragment(String content){
this.content=content;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
view=inflater.inflate(R.layout.fragment_addr,container,false);
TextView textView=(TextView)view.findViewById(R.id.textView_addr);
textView.setText(content);
return view;
}
}
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView_wechat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="24sp"
android:text="@string/wechatPrint" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
设计界面(之一)
5.编写MainActivity.java
package com.firsttest.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.SurfaceControl;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import static com.firsttest.myapplication.R.id.imageView_1;
import static com.firsttest.myapplication.R.id.imageView_2;
import static com.firsttest.myapplication.R.id.imageView_3;
import static com.firsttest.myapplication.R.id.imageView_4;
import static com.firsttest.myapplication.R.id.textView_1;
import static com.firsttest.myapplication.R.id.textView_2;
import static com.firsttest.myapplication.R.id.textView_3;
import static com.firsttest.myapplication.R.id.textView_4;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private LinearLayout ll_1;
private LinearLayout ll_2;
private LinearLayout ll_3;
private LinearLayout ll_4;
private TextView tv_1;
private TextView tv_2;
private TextView tv_3;
private TextView tv_4;
private ImageView iv_1;
private ImageView iv_2;
private ImageView iv_3;
private ImageView iv_4;
private TextView txt_setting;
private FrameLayout fl_content;
private wechatFragment fg1;
private addrFragment fg2;
private findFragment fg3;
private meFragment fg4;
private FragmentManager fManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fManager=getSupportFragmentManager();
bindViews();
ll_1.performClick();
}
//事件绑定
private void bindViews() {
tv_1=(TextView) findViewById(textView_1);
tv_2=(TextView)findViewById(textView_2);
tv_3=(TextView)findViewById(textView_3);
tv_4=(TextView)findViewById(textView_4);
iv_1=(ImageView)findViewById(imageView_1);
iv_2=(ImageView)findViewById(imageView_2);
iv_3=(ImageView)findViewById(imageView_3);
iv_4=(ImageView)findViewById(imageView_4);
ll_1=(LinearLayout)findViewById(R.id.linearlayout_1);
ll_2=(LinearLayout)findViewById(R.id.linearlayout_2);
ll_3=(LinearLayout)findViewById(R.id.linearlayout_3);
ll_4=(LinearLayout)findViewById(R.id.linearlayout_4);
fl_content=(FrameLayout)findViewById(R.id.fl_content);
ll_1.setOnClickListener(this);//点击事件绑定
ll_2.setOnClickListener(this);
ll_3.setOnClickListener(this);
ll_4.setOnClickListener(this);
}
//重置选中状态
private void setSelected(){
ll_1.setSelected(false);
ll_2.setSelected(false);
ll_3.setSelected(false);
ll_4.setSelected(false);
}
private void hideAllFragment(FragmentTransaction fragmentTransaction){
if(fg1!=null)fragmentTransaction.hide(fg1);
if(fg2!=null)fragmentTransaction.hide(fg2);
if(fg3!=null)fragmentTransaction.hide(fg3);
if(fg4!=null)fragmentTransaction.hide(fg4);
}
//重置颜色,没有选中就为灰色
private void turnColorToGray(){
tv_1.setTextColor(0xd0d0d0d0);//灰色
tv_2.setTextColor(0xd0d0d0d0);
tv_3.setTextColor(0xd0d0d0d0);
tv_4.setTextColor(0xd0d0d0d0);
iv_1.setImageResource(R.drawable.wechat_);//替换为灰色的图片
iv_2.setImageResource(R.drawable.addr_);
iv_3.setImageResource(R.drawable.find_);
iv_4.setImageResource(R.drawable.me_);
}
@Override
public void onClick(View view) {
FragmentTransaction fTransaction=fManager.beginTransaction();
hideAllFragment(fTransaction);turnColorToGray();
switch(view.getId()){
case R.id.linearlayout_1:
setSelected();
tv_1.setTextColor(0xff1B940A);iv_1.setImageResource(R.drawable.wechat);
//选中就着色
ll_1.setSelected(true);
if(fg1==null) {
fg1 = new wechatFragment("这是微信界面");
fTransaction.add(R.id.fl_content,fg1);
}
else{
fTransaction.show(fg1);
}
break;
case R.id.linearlayout_2:
setSelected();
tv_2.setTextColor(0xff1B940A);iv_2.setImageResource(R.drawable.addr);
ll_2.setSelected(true);
if(fg2==null) {
fg2 = new addrFragment("这是通讯录界面");
fTransaction.add(R.id.fl_content,fg2);
}
else{
fTransaction.show(fg2);
}break;
case R.id.linearlayout_3:
setSelected();
tv_3.setTextColor(0xff1B940A);iv_3.setImageResource(R.drawable.find);
ll_3.setSelected(true);
if(fg3==null) {
fg3 = new findFragment("这是发现页");
fTransaction.add(R.id.fl_content,fg3);
}
else{
fTransaction.show(fg3);
}break;
case R.id.linearlayout_4:
setSelected();
tv_4.setTextColor(0xff1B940A);iv_4.setImageResource(R.drawable.me);
ll_4.setSelected(true);
if(fg4==null) {
fg4 = new meFragment("这是个人页");
fTransaction.add(R.id.fl_content,fg4);
}
else{
fTransaction.show(fg4);
}break;
}
fTransaction.commit();
}
}
四、运行结果