Android使用Fragment实现界面的转跳
一个Fragment总是嵌入在一个Activity中,同时Fragment的生命周期会受到Activity的影响;
接下来我们就来实现一下使用Fragment来转跳界面
先写个简单的布局(这个布局我就不多解释啦)
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
//把整体分为两部分,内容和底部功能栏
<RelativeLayout
android:id="@+id/container_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
<LinearLayout
android:id="@+id/container_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#ffffff"
android:layout_alignParentBottom="true">
<LinearLayout
android:id="@+id/menu_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu_main_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:layout_gravity="center"
android:textColor="#000000"/>
</LinearLayout>
<LinearLayout
android:id="@+id/menu_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu_find_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发现"
android:layout_gravity="center"
android:textColor="#000000"/>
</LinearLayout>
<LinearLayout
android:id="@+id/menu_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu_me_icon"/> //选择器
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的"
android:layout_gravity="center"
android:textColor="#000000"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
之后我们就实现单击图标后,图标会有转跳,简单的说就是看得到你有单击图标
首先要准备好6张图标的图片,三套,一套两张,两张图案一模一样,颜色不同
接下来就是在drawable下创建三个布局文件,如图:
每个布局文件写两行代码
<item android:drawable="@mipmap/nav_main_click" android:state_pressed="true"></item>
<item android:drawable="@mipmap/nav_main_normal"></item>
第一行是点击后转跳的图片,第二行是默认的图片
然后在java下创建一个包,包名fragment
在包下创建三个类,如图
每个类的代码都差不多,这里我就只写一个
package com.example.travel.fragment;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.travel.R;
public class Mainfragment extends Fragment {
//创建视图
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate (R.layout.fragment_main,container,false);
}
}
然后就是创建Fragment的布局文件了
在layout下创建三个相对应的布局文件
这三个布局文件可以写很多控件,事件那些,但我这里为了方便就写了一个TextView
fragment_me.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是我的"/>
</RelativeLayout>
然后就是主代码部分了
MainActivity.java
package com.example.travel;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import com.example.travel.fragment.Findfragment;
import com.example.travel.fragment.Mainfragment;
import com.example.travel.fragment.Mefragment;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
protected LinearLayout mMenuMain;
protected LinearLayout mMenuMe;
protected LinearLayout mMenuFind;
//定义Fragment
protected Mainfragment mainfragment = new Mainfragment ();
protected Mefragment mefragment = new Mefragment ();
protected Findfragment findfragment = new Findfragment ();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.activity_main);
initView();
//获取管理类
this.getSupportFragmentManager ()
.beginTransaction ()
.add (R.id.container_content,mainfragment) //增加容器里面的fragment
.add (R.id.container_content,mefragment)
.hide (mefragment) //隐藏
.add (R.id.container_content,findfragment)
.hide (findfragment) //隐藏
.commit (); //提交
}
//初始化
private void initView() {
mMenuMain = this.findViewById (R.id.menu_main);
mMenuFind = this.findViewById (R.id.menu_find);
mMenuMe = this.findViewById (R.id.menu_me);
mMenuMain.setOnClickListener (this);
mMenuMe.setOnClickListener (this);
mMenuFind.setOnClickListener (this);
}
@Override
public void onClick(View v) {
switch (v.getId ()){
case R.id.menu_main:
this.getSupportFragmentManager ()
.beginTransaction ()
.show (mainfragment)
.hide (mefragment) //隐藏
.hide (findfragment) //隐藏
.commit ();
break;
case R.id.menu_find:
this.getSupportFragmentManager ()
.beginTransaction ()
.show (findfragment)
.hide (mainfragment)
.hide (mefragment)
.commit ();
break;
case R.id.menu_me:
this.getSupportFragmentManager ()
.beginTransaction ()
.show (mefragment)
.hide (mainfragment)
.hide (findfragment) //隐藏
.commit ();
break;
}
}
}
最后就是运行啦