进行实训操作
- 前台代码
(1)
创建fragment1,插入图片1
创建fragment2,插入图片2
创建fragment3,插入图片3
创建fragment4,插入图片4
(2)主函数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"
android:orientation="vertical"
tools:context="lesson10.computer.lesson19_training.MainActivity">
<!-- 主题部分-->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>
<!-- 导航部分-->
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#000000">
</View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
>
<!-- 消息按钮-->
<LinearLayout
android:id="@+id/message_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/message"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"
/>
</LinearLayout>
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:background="#000000">
</View>
<!-- 联系人按钮-->
<LinearLayout
android:id="@+id/contacts_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/contacts"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="联系人"
/>
</LinearLayout>
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:background="#000000">
</View>
<!-- 动态按钮-->
<LinearLayout
android:id="@+id/news_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/news"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="动态"
/>
</LinearLayout>
<View
android:layout_width="0.5dp"
android:layout_height="match_parent"
android:background="#000000">
</View>
<!-- 设置-->
<LinearLayout
android:id="@+id/setting_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/setting"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
效果图
- 后台代码
主函数MainActivity
package lesson10.computer.lesson19_training;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private View messageBtn;
private View contactsBtn;
private View newsBtn;
private View settingBtn;
private MyFragment1 fragment1;
private MyFragment2 fragment2;
private MyFragment3 fragment3;
private MyFragment4 fragment4;
private FragmentManager manager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
/**
* 初始化
*/
private void init() {
// //创建全局的Fragment实例
// fragment1 = new MyFragment1();
// fragment2 = new MyFragment2();
// fragment3 = new MyFragment3();
// fragment4 = new MyFragment4();
//获取FragmentManager实例
manager = this.getSupportFragmentManager();
messageBtn = findViewById(R.id.message_layout);
contactsBtn = findViewById(R.id.contacts_layout);
newsBtn = findViewById(R.id.news_layout);
settingBtn = findViewById(R.id.setting_layout);
//设置点击事件的监听
messageBtn.setOnClickListener(this);
contactsBtn.setOnClickListener(this);
newsBtn.setOnClickListener(this);
settingBtn.setOnClickListener(this);
}
@Override
//点击画面就会调用此函数
public void onClick(View v) {
switch (v.getId()){
case R.id.message_layout:
//消息按钮
setSelectionTab(0);
break;
case R.id.contacts_layout:
//联系人按钮
setSelectionTab(1);
break;
case R.id.news_layout:
//动态按钮
setSelectionTab(2);
break;
case R.id.setting_layout:
//设置按钮
setSelectionTab(3);
break;
}
}
/**
* 设置选中的Tab页面
* @param index
* 0:消息 1:联系人 2:动态 3:设置
*/
public void setSelectionTab(int index){
//1.创建Fragment实例
//2. 获取FragmentManager实例 ,getSupportFragmentManager()方法
//3.利用2中得到了manage实例,开启事务beginTransaction()
//4.利用3中开启的事务,把Fragment添加、移除、显示、隐藏、容器中
//5. 提交事务
FragmentTransaction trans = manager.beginTransaction();
//设置所有的按钮都是非选择状态
setUnSelect();
//隐藏所有的Fragment
hideFragments(trans);
//切换按钮的选中状态
switch (index){
case 0:
//设置消息按钮的选择状态,ff是透明度,00是完全不透明,后六位是颜色,此为蓝色、透明
this.messageBtn.setBackgroundColor(0xff0000ff);
if(fragment1==null) {
fragment1 = new MyFragment1();
trans.add(R.id.content,fragment1);
}else{
trans.show(fragment1);
}
break;
case 1:
//联系人按钮设置为蓝色
this.contactsBtn.setBackgroundColor(0xff0000ff);
if(fragment2==null) {
fragment2 = new MyFragment2();
trans.add(R.id.content,fragment2);
}else{
trans.show(fragment2);
}
break;
case 2:
//动态按钮设置为选择状态
this.newsBtn.setBackgroundColor(0xff0000ff);
if(fragment3==null) {
fragment3 = new MyFragment3();
trans.add(R.id.content,fragment3);
}else{
trans.show(fragment3);
}
break;
case 3:
//设置按钮设置的选择状态
this.settingBtn.setBackgroundColor(0xff0000ff);
if(fragment4==null) {
fragment4 = new MyFragment4();
trans.add(R.id.content,fragment4);
}else{
trans.show(fragment4);
}
break;
}
//提交事务
trans.commit();
}
/**
* 隐藏所有的Fragment
* @param trans
*/
private void hideFragments(FragmentTransaction trans) {
if(fragment1 != null) {
trans.hide(fragment1);
}
if(fragment2 != null) {
trans.hide(fragment2);
}
if(fragment3 != null) {
trans.hide(fragment3);
}
if(fragment4 != null) {
trans.hide(fragment4);
}
}
/**
* 将所有按钮设置为非选择状态
*/
private void setUnSelect() {
this.messageBtn.setBackgroundColor(0xffffffff);
this.contactsBtn.setBackgroundColor(0xffffffff);
this.newsBtn.setBackgroundColor(0xffffffff);
this.settingBtn.setBackgroundColor(0xffffffff);
}
}
效果图