项目内容
根据课程实现APP门户界面框架设计,至少包含4个tab页,能实现tab页之间的点击切换
主要技术
使用布局(layouts)和分段(fragment),对控件进行点击监听
具体过程及代码
分为四个板块,包括xml文件设计和java文件设计
顶部设计top.xml
点击新建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="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="55dp"
android:layout_weight="1"
android:gravity="center"
android:text="微信"
android:background="#ECECEA"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>
效果展示
底部设计bottom.xml
底部设计共八个板块,包括图片和文字,运用LinearLayout(horizontal)构造外部,内部包括四个Linearlayout(vertical),每个中包括image和text。为了让内部四板块垂直布局均匀分布,设置android:layout_weight=“1”。文字更改字号,android:gravity="center"居中。
代码
<?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"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#ECECEA">
<LinearLayout
android:id="@+id/vx"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="40dp"
app:srcCompat="@android:drawable/sym_action_chat" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:textSize="15sp"
android:text="微信" />
</LinearLayout>
<LinearLayout
android:id="@+id/people"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="40dp"
app:srcCompat="@android:drawable/ic_menu_my_calendar" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:textSize="15sp"
android:text="通讯录" />
</LinearLayout>
<LinearLayout
android:id="@+id/find"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="40dp"
app:srcCompat="@android:drawable/ic_menu_search" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:textSize="15sp"
android:text="发现" />
</LinearLayout>
<LinearLayout
android:id="@+id/my"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="40dp"
app:srcCompat="@android:drawable/star_big_off" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:textSize="15sp"
android:text="我的"
/>
</LinearLayout>
</LinearLayout>
效果展示
主要页面activity_main.xml
运用LinearLayout布局,拖入FragmentLayout,运用include引入顶部界面top.xml和底部界面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="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<include
layout="@layout/top" />
<FrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
<include
layout="@layout/bottom"/>
</LinearLayout>
效果展示
Fragment实现页面切换
- 建立四个fragment java文件,分别对应不同xml界面
2.“微信”界面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=".wxFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="这里是微信页面"
android:textSize="50sp" />
</FrameLayout>
效果展示
3.完成文件MainActivity实现监听和切换功能
创建对象并进行初始化
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Fragment wxFragment = new wxFragment();
private Fragment peopleFragment = new peopleFragment();
private Fragment findFragment = new findFragment();
private Fragment myFragment = new myFragment();
private FragmentManager fragmentManager;
private LinearLayout linearLayout1;
private LinearLayout linearLayout2;
private LinearLayout linearLayout3;
private LinearLayout linearLayout4;
private ImageView imageView1;
private ImageView imageView2;
private ImageView imageView3;
private ImageView imageView4;
private TextView textView1;
private TextView textView2;
private TextView textView3;
private TextView textView4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout1 = findViewById(R.id.vx);
linearLayout2 = findViewById(R.id.people);
linearLayout3 = findViewById(R.id.find);
linearLayout4 = findViewById(R.id.my);
imageView1=findViewById(R.id.imageView1);
imageView2=findViewById(R.id.imageView2);
imageView3=findViewById(R.id.imageView3);
imageView4=findViewById(R.id.imageView4);
textView1=findViewById(R.id.textView1);
textView2=findViewById(R.id.textView2);
textView3=findViewById(R.id.textView3);
textView4=findViewById(R.id.textView4);
linearLayout1.setOnClickListener((View.OnClickListener) this);
linearLayout2.setOnClickListener((View.OnClickListener) this);
linearLayout3.setOnClickListener((View.OnClickListener) this);
linearLayout4.setOnClickListener((View.OnClickListener) this);
initFragment();
ShowFragment(0);
}
配置对象进行监听
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linearLayout1 = findViewById(R.id.vx);
linearLayout2 = findViewById(R.id.people);
linearLayout3 = findViewById(R.id.find);
linearLayout4 = findViewById(R.id.my);
imageView1=findViewById(R.id.imageView1);
imageView2=findViewById(R.id.imageView2);
imageView3=findViewById(R.id.imageView3);
imageView4=findViewById(R.id.imageView4);
textView1=findViewById(R.id.textView1);
textView2=findViewById(R.id.textView2);
textView3=findViewById(R.id.textView3);
textView4=findViewById(R.id.textView4);
linearLayout1.setOnClickListener((View.OnClickListener) this);
linearLayout2.setOnClickListener((View.OnClickListener) this);
linearLayout3.setOnClickListener((View.OnClickListener) this);
linearLayout4.setOnClickListener((View.OnClickListener) this);
initFragment();
ShowFragment(0);
}
添加切换的三个界面
private void initFragment() {
fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.frame,wxFragment);
transaction.add(R.id.frame,peopleFragment);
transaction.add(R.id.frame,findFragment);
transaction.add(R.id.frame,myFragment);
transaction.commit();
}
隐藏除该展示页面外的其他页面
private void hideFragment(FragmentTransaction transaction){
transaction.hide(wxFragment);
transaction.hide(findFragment);
transaction.hide(peopleFragment);
transaction.hide(myFragment);
}
控制展示不同页面
private void ShowFragment(int i) {
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(wxFragment);
break;
case 1:
transaction.show(peopleFragment);
break;
case 2:
transaction.show(findFragment);
break;
case 3:
transaction.show(myFragment);
break;
default:
break;
}
transaction.commit();
}
选择页面后,还原其他页面的图标和字体
private void hide(){
imageView1.setColorFilter(Color.WHITE);
imageView2.setColorFilter(Color.WHITE);
imageView3.setColorFilter(Color.WHITE);
imageView4.setColorFilter(Color.WHITE);
textView1.setTextColor(Color.BLACK);
textView2.setTextColor(Color.BLACK);
textView3.setTextColor(Color.BLACK);
textView4.setTextColor(Color.BLACK);
}
图标和字体更改颜色
@Override
public void onClick(View view) {
switch(view.getId()){
case R.id.vx:
ShowFragment(0);
hide();
imageView1.setColorFilter(Color.GREEN);
textView1.setTextColor(Color.GREEN);
break;
case R.id.people:
ShowFragment(1);
hide();
imageView2.setColorFilter(Color.GREEN);
textView2.setTextColor(Color.GREEN);
break;
case R.id.find:
ShowFragment(2);
hide();
imageView3.setColorFilter(Color.GREEN);
textView3.setTextColor(Color.GREEN);
break;
case R.id.my:
ShowFragment(3);
hide();
imageView4.setColorFilter(Color.GREEN);
textView4.setTextColor(Color.GREEN);
break;
default:
break;
}
结果展示