Fragment切换页面思路整理

通过慕课的学习现在整理下思路，使用fragment实现微信页面的切换，首先从整体思考：
我们需要先定义mainactivity.java;main.xml;
由于我们的微信是有顶部，中部，还有顶部三部分构成，
所以我们需要把这顶部和底部分别自定义布局，然后用include添加到main.xml.(具体布局看源码)，俩个include中间写个linerlayout
然后定义4个fragment和它们的布局文件;
接下来在mainactivity中内实现切换功能.
首先定义我们需要的属性，分别有底部的tab的4个linerlayout，还有其TextView和ImageView,Fragment 1,2,3,4;
在oncreate方法内调用initView（）方法实例化它们的属性，然后设置底部的tab的4个linerlayout的点击事件，这个要implements OnClickListener，然后在点击事件中首先要初始化其图片的默认内容，
我们要调用isselect（position）方法来动态添加fragment，调用isselect（position）后我们还要设置点击tab后点击图片的变化。
在isselect（position）的代码中先调用hideFragment方法因为这样会减少每次都要创建fragment的重复创建。还有isselect（position）中switch（position）中if~else的使用也使用的很好，可以想一想，当我们运行这些代码是我们的fragment还没有实例化，这样的话在switch（position）前的hideFragment调用后将不会产生影响，然后接着我们进行if~else判断.
如果fragment没有实例化将实例化并add（R.id.page,fragment1），
这样的话就被添加到页面上了，
如果fragment实例化后将show（fragment），显示内容。
重要思想：这个源码中运行过程中只会有创建一次fragment的实例，其后都是通过show和hide方法来显示的。

在这里的mainactivity中的思路很好。

这个是mainactivity.java

package cn.oddcloud.www.startoveragain7.FragmentDemo;


import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

import cn.oddcloud.www.startoveragain7.R;

public class MainActivity1 extends FragmentActivity implements View.OnClickListener{
    LinearLayout layout1;
    LinearLayout layout2;
    LinearLayout layout3;
    LinearLayout layout4;
    ImageView img1;
    ImageView img2;
    ImageView img3;
    ImageView img4;
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    Fragment4 fragment4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.fragmentdemo);
        intiView();
        intiEvent();
        isSelect(0);

    }

    private void intiEvent() {
        layout1.setOnClickListener( this);
        layout2.setOnClickListener((View.OnClickListener) this);
        layout3.setOnClickListener((View.OnClickListener) this);
        layout4.setOnClickListener((View.OnClickListener) this);
    }

    private void intiView() {

        layout1= (LinearLayout) findViewById(R.id.tab1);
        layout2= (LinearLayout) findViewById(R.id.tab2);
        layout3= (LinearLayout) findViewById(R.id.tab3);
        layout4= (LinearLayout) findViewById(R.id.tab4);
        img1= (ImageView) findViewById(R.id.image1);
        img2= (ImageView) findViewById(R.id.image2);
        img3= (ImageView) findViewById(R.id.image3);
        img4= (ImageView) findViewById(R.id.image4);
    }
public void  isSelect(int position){
    FragmentManager fragmentManager=getSupportFragmentManager();
    FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
    hideFragment(fragmentTransaction);
    switch (position) {
        case 0:
        if (fragment1 == null) {
            fragment1 = new Fragment1();
            fragmentTransaction.add(R.id.page1, fragment1);
        } else {
            fragmentTransaction.show(fragment1);
        }
            break;
        case 1:
            if (fragment2 == null) {
                fragment2 = new Fragment2();
                fragmentTransaction.add(R.id.page1, fragment2);
            } else {
                fragmentTransaction.show(fragment2);
            }
            break;
        case 2:
            if (fragment3 == null) {
                fragment3 = new Fragment3();
                fragmentTransaction.add(R.id.page1, fragment3);
            } else {
                fragmentTransaction.show(fragment3);
            }
            break;
        case 3:
            if (fragment4 == null) {
                fragment4 = new Fragment4();
                fragmentTransaction.add(R.id.page1, fragment4);
            } else {
                fragmentTransaction.show(fragment4);
            }
            break;

    }
    fragmentTransaction.commit();
}
  public void hideFragment(FragmentTransaction fragmentTransaction){
      if (fragment1!=null)
      {
         fragmentTransaction.hide(fragment1);
      }
      if (fragment2!=null)
      {
          fragmentTransaction.hide(fragment2);
      }
      if (fragment3!=null)
      {
          fragmentTransaction.hide(fragment3);
      }
      if (fragment4!=null)
      {
          fragmentTransaction.hide(fragment4);
      }


   }

    @Override
    public void onClick(View v) {
        ImageIdChange();
        switch (v.getId())
        {
            case R.id.tab1:
               isSelect(0);
                img1.setImageResource(R.drawable.tab_weixin_pressed);

                break;
            case R.id.tab2:

                isSelect(1);
                img2.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case R.id.tab3:

                isSelect(2);
                img3.setImageResource(R.drawable.tab_address_pressed);
                break;
            case R.id.tab4:

                isSelect(3);
                img4.setImageResource(R.drawable.tab_settings_pressed);
                break;
        }
    }
    public void ImageIdChange(){
        img1.setImageResource(R.drawable.tab_weixin_normal);
        img2.setImageResource(R.drawable.tab_find_frd_normal);
        img3.setImageResource(R.drawable.tab_address_normal);
        img4.setImageResource(R.drawable.tab_settings_normal);

    }
}

其布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/top"></include>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/page1"></LinearLayout>
    <include layout="@layout/bottom"/>

</LinearLayout>

fragment1.java
其他3个fragment都差不多，
return inflater.inflate(R.layout.tab_1,null);改一下布局R.layout.tab_1即可


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import cn.oddcloud.www.startoveragain7.R;

/**
 * Created by Administrator on 2016/5/5.
 */
public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab_1,null);
    }
}

fragment1的xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<TextView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tab_1"
    android:text="this is a 首页"
    android:gravity="center"
    android:textSize="23sp"
    />
</LinearLayout>

底部导航文件xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:background="@drawable/bottom_bar9"
    android:layout_height="wrap_content"
    android:gravity="center">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/tab1"
        android:orientation="vertical">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:id="@+id/image1"
            android:src="@drawable/tab_weixin_pressed"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"
            android:id="@+id/text1"
            android:layout_gravity="center"
            android:textColor="#fff"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:id="@+id/tab2">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:id="@+id/image2"
            android:src="@drawable/tab_find_frd_normal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友" android:id="@+id/text2"
            android:layout_gravity="center"
            android:textColor="#fff"></TextView>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:id="@+id/tab3">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/image3"
            android:layout_gravity="center"
            android:src="@drawable/tab_find_frd_normal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="地址"
            android:layout_gravity="center" android:id="@+id/text3"
            android:textColor="#fff"></TextView>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:id="@+id/tab4">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/image4"
            android:layout_gravity="center"
            android:src="@drawable/tab_settings_normal"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:layout_gravity="center"
            android:id="@+id/text4"
            android:textColor="#fff"></TextView>
    </LinearLayout>

</LinearLayout>

顶部的xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:background="@drawable/title_bar9"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"

    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="微信"
     android:gravity="center"
    android:layout_gravity="center_vertical"

    android:textSize="32sp"
    android:textColor="#fff"

    />


</LinearLayout>

Fragment切换页面思路整理

猜你喜欢