Fragment框架的搭建及Fragment切换的跳转动画-原创手记-慕课网

1.Fragment的使用主要是通过FragmentMannager的hide() add()方法对Fragment进行添加和隐藏

2.Fragment的动画切换主要是通过ft.setCustomAnimations进行进入动画和退出动画的切换

主界面的xml布局如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    >

    <RelativeLayout
        android:id="@+id/show_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/menu_line" >
    </RelativeLayout>

    <View
        android:id="@+id/menu_line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/menu_bottom"
        android:background="@color/bg_Gray"
        />

    <LinearLayout
        android:id="@+id/menu_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingTop="8dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/iv_menu_0"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/bt_menu_0_select" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页"
                android:textSize="11sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/iv_menu_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/bt_menu_1_select" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="微淘"
                android:textSize="11sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/iv_menu_2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/bt_menu_2_select" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现"
                android:textSize="11sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/iv_menu_3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/bt_menu_3_select" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="购物车"
                android:textSize="11sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/iv_menu_4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/bt_menu_4_select" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我的淘宝"
                android:textSize="11sp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

Main_FA.java

package zm.ztd.com.rx_login;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.widget.ImageView;

import zm.ztd.com.rx_login.fragment.Cart_F;
import zm.ztd.com.rx_login.fragment.Discover_F;
import zm.ztd.com.rx_login.fragment.Home_F;
import zm.ztd.com.rx_login.fragment.Tao_F;
import zm.ztd.com.rx_login.fragment.User_F;

/**
 * 仿淘宝搭建框架（一） 主要是底下4个Fragment按钮的切换和 Fragment切换时的动画
 * 整个程序最底层的框架Activity，所有的Fragment都是依赖于此Activity而存在的
 * Created by Administrator on 2017-01-06.
 */
public class Main_FA extends FragmentActivity implements View.OnClickListener{
    //界面底部的菜单按钮
    private ImageView[]bt_menu=new ImageView[5];
    //界面底部的选中菜单按钮id
    private int[]bt_menu_id={R.id.iv_menu_0,R.id.iv_menu_1,R.id.iv_menu_2,R.id.iv_menu_3,R.id.iv_menu_4};
    // 界面底部的选中菜单按钮资源
    private int[] select_on = { R.drawable.guide_home_on, R.drawable.guide_tfaccount_on, R.drawable.guide_discover_on, R.drawable.guide_cart_on, R.drawable.guide_account_on };
    // 界面底部的未选中菜单按钮资源
    private int[] select_off = { R.drawable.bt_menu_0_select, R.drawable.bt_menu_1_select, R.drawable.bt_menu_2_select, R.drawable.bt_menu_3_select, R.drawable.bt_menu_4_select };

    /** 主界面 */
    private Home_F home_F;
    /** 微淘界面 */
    private Tao_F tao_F;
    /** 发现界面 */
    private Discover_F discover_F;
    /** 购物车界面 */
    private Cart_F cart_F;
    /** 我的淘宝界面 */
    private User_F user_F;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_fa);

        initView();
    }

    // 初始化组件
    private void initView() {
        // 找到底部菜单的按钮并设置监听
        for (int i = 0; i < bt_menu.length; i++) {
            bt_menu[i] = (ImageView) findViewById(bt_menu_id[i]);
            bt_menu[i].setOnClickListener(this);
        }

        //初始化默认显示界面
        if(home_F==null){
            home_F=new Home_F();
            addFragment(home_F);
            showFragment(home_F);
        }else{
            showFragment(home_F);
        }

       //设置默认首页为点击时的图片
       bt_menu[0].setImageResource(select_on[0]);
    }


    /**
     * 添加Fragment
     * @param fragment
     */
     public void addFragment(Fragment fragment){
         FragmentTransaction ft=this.getSupportFragmentManager().beginTransaction();
         ft.add(R.id.show_layout,fragment);
         ft.commit();
     }

    /**
     * 显示Fragment
     * @param fragment
     */
    public void showFragment(Fragment fragment){
        FragmentTransaction ft=this.getSupportFragmentManager().beginTransaction();
        //设置Fragment切换动画
        ft.setCustomAnimations(R.anim.cu_push_right_in,R.anim.cu_push_left_out);
        //判断页面是否创建  如果已经创建 就隐藏掉
        if(home_F!=null){
            ft.hide(home_F);
        }
        if(tao_F!=null){
            ft.hide(tao_F);
        }
        if(discover_F!=null){
            ft.hide(discover_F);
        }
        if(cart_F!=null){
            ft.hide(cart_F);
        }
        if(user_F!=null){
            ft.hide(user_F);
        }

        ft.show(fragment);
        ft.commitAllowingStateLoss();
    }


    @Override
    public void onClick(View view) {
         switch (view.getId()){
             case R.id.iv_menu_0:
                 //主界面
                 if(home_F==null){
                     home_F=new Home_F();
                     addFragment(home_F);
                     showFragment(home_F);
                 }else{
                     if(home_F.isHidden()){
                         showFragment(home_F);
                     }
                 }
                 break;
             case R.id.iv_menu_1:
                 //微淘界面
                 if(tao_F==null){
                     tao_F=new Tao_F();
                     if(!tao_F.isHidden()){
                         addFragment(tao_F);
                         showFragment(tao_F);
                     }
                 }else{
                     if(tao_F.isHidden()){
                         showFragment(tao_F);
                     }
                 }
                 break;
             case R.id.iv_menu_2:
                 //发现界面
                 if(discover_F==null){
                     discover_F=new Discover_F();
                     if(!discover_F.isHidden()){
                         addFragment(discover_F);
                         showFragment(discover_F);
                     }
                 }else{
                     if(discover_F.isHidden()){
                         showFragment(discover_F);
                     }
                 }
                 break;
             case R.id.iv_menu_3:
                 //购物车界面
                 if(cart_F==null){
                     cart_F=new Cart_F();
                     if(!cart_F.isHidden()){
                         addFragment(cart_F);
                         showFragment(cart_F);
                     }
                 }else{
                     if (cart_F.isHidden()){
                         showFragment(cart_F);
                     }
                 }
                 break;
             case R.id.iv_menu_4:
                 //我的淘宝界面
                 if(user_F==null){
                     user_F=new User_F();
                     if(!user_F.isHidden()){
                         addFragment(user_F);
                         showFragment(user_F);
                     }
                 }else{
                     if(user_F.isHidden()){
                         showFragment(user_F);
                     }
                 }
                 break;

         }
        //设置按钮的选中和未选中资源
        for(int i=0;i<bt_menu.length;i++){
            //先设置全部为未选中状态的图片
            bt_menu[i].setImageResource(select_off[i]);
            if(view.getId()==bt_menu_id[i]){
                bt_menu[i].setImageResource(select_on[i]);
            }
        }


    }
}

Fragment动画:

1.在res文件夹下建立anim文件夹

建立两个xml文件 一个进入动画xml 一个退出动画xml

cu_push_right.in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="350"
        android:fromXDelta="100%p"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:toXDelta="0" />

</set>

cu_push_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="350"
        android:fromXDelta="0"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:toXDelta="-100%p" />

</set>

Fragment代码中调用:

FragmentTransaction ft=this.getSupportFragmentManager().beginTransaction();
//设置Fragment切换动画
ft.setCustomAnimations(R.anim.cu_push_right_in,R.anim.cu_push_left_out);

ft.show(fragment);
ft.commitAllowingStateLoss();

原文链接：http://www.apkbus.com/blog-813041-62915.html