Fragment仿qq界面

最新推荐文章于 2019-01-09 15:29:40 发布

始于初见i

最新推荐文章于 2019-01-09 15:29:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签： android

本文链接：https://blog.youkuaiyun.com/broad_ocean/article/details/52180586

android 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Android中使用Fragment实现类似QQ界面的切换效果。通过XML文件和Java代码动态创建Fragment，并在MainActivity中处理点击事件，根据Fragment的状态进行显示或新建。同时，在Fragment的代码中需要注意使用getActivity()获取Context。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

翻译：碎片
优点：适用于不同的屏幕尺寸和分辨率的UI布局，提高了代码的重用率。

创建

1.通过xml文件

— 1.创建main布局

<?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"
    android:orientation="vertical" >

    <fragment
        android:id="@+id/center_fragment"
        android:name="com.example.fragmenttest.FragmentCenter"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" >
    </fragment>

    <fragment
        android:id="@+id/bottom_fragment"
        android:name="com.example.fragmenttest.FragmentBottom"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </fragment>

</LinearLayout>

— 2.定义两个fragment类

public class FragmentCenter extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub

        View view = inflater.inflate(R.layout.center_fragment, container, false);

        return view;
    }
}

public class FragmentBottom extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View view = inflater.inflate(R.layout.bottom_fragment, container,false);
        return view;
    }
}

注意：这里的两个布局文件R.layout.center_fragment和R.layout.bottom_fragment是自定义的普通的布局文件

— 3.MainActivity

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
}

2.通过java代码动态创建

@SuppressLint("NewApi") public class FragmentTest2Activity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_test2);

        //获取碎片管理器
        FragmentManager fragmentManager = getFragmentManager();
        //碎片的显示需要使用FragmentTransaction类操作
        FragmentTransaction transaction = fragmentManager.beginTransaction(); 
        //获取屏幕管理器和默认的显示
        Display display = getWindowManager().getDefaultDisplay(); 
        if(display.getWidth() > display.getHeight()){  //判断横屏
            FragmentCenter fragmentCenter = new FragmentCenter(); //获取java类
            transaction.replace(android.R.id.content, fragmentCenter);
        }else {
            FragmentBottom fragmentBottom = new FragmentBottom();
            transaction.replace(android.R.id.content, fragmentBottom);
        }
        transaction.commit();   //使用FragmentTransaction必须要commit
    }
}

fragment仿qq界面（fragment的切换）

MainActivity中的相关代码

功能：

— 1、创建fragment

— 2、点击相应的按钮时，会切换不同的fragment（在切换的过程中，首先需要判断该fragment是隐藏了还是没有创建过；如果是隐藏了就直接show，如果没有创建过就new，最后调用`fragmentTransaction.commit();进行切换`）

public class MainActivity extends Activity implements View.OnClickListener {

    private ImageView contactImage;
    private ImageView msgImage;
    private ImageView trendImage;
    private ImageView title_head;
    private TextView title_center;
    private Button title_button;

    private ContactFragment contactFragment;
    private MsgFragment msgFragment;
    private TrendFragment trendFragment;

    private FragmentManager fragmentManager;
    private FragmentTransaction fragmentTransaction;

    //表示是哪个Fragment
    int fragment_tag = 0; //默认是消息
    static final int FRAGMENT_TAB_MSG = 0;
    static final int FRAGMENT_TAB_CONTACT = 1;
    static final int FRAGMENT_TAB_PLUGIN = 2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        initViews();
        fragmentManager = getFragmentManager();
        // 第一次启动时选中第0个tab
        setTabSelection(0);
    }

    private void initViews() {
        //消息
        contactImage = (ImageView) findViewById(R.id.tab_contact);
        //联系人
        msgImage = (ImageView) findViewById(R.id.tab_conversation);
        //动态
        trendImage = (ImageView) findViewById(R.id.tab_plugin);

        //标题栏
        title_head = (ImageView) findViewById(R.id.title_head);
        title_center = (TextView) findViewById(R.id.title_center);
        title_button = (Button) findViewById(R.id.title_button);

        contactImage.setOnClickListener(this);
        msgImage.setOnClickListener(this);
        trendImage.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tab_conversation:
                // 当点击了消息tab时，选中第1个tab
                setTabSelection(0);
                break;
            case R.id.tab_contact:
                // 当点击了联系人tab时，选中第2个tab
                setTabSelection(1);
                break;
            case R.id.tab_plugin:
                // 当点击了动态tab时，选中第3个tab
                setTabSelection(2);
                break;
            default:
                break;
        }
    }

    /**
     * 根据传入的index参数来设置选中的tab页。
     *
     * @param index 每个tab页对应的下标。0表示消息，1表示联系人，2表示动态
     */
    private void setTabSelection(int index) {

        // 开启一个Fragment事务
        fragmentTransaction = fragmentManager.beginTransaction();

        // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
        hideFragments(fragmentTransaction);

        /*--------------------------------------------------
         *      改变底层栏（bottom panel）
         *      改变标题栏
         *-------------------------------------------------*/
        switch (index) {
            case 0:  // 当点击了消息tab时，改变控件的图片和文字颜色
                //“消息”
                                msgImage.setImageResource(R.drawable.skin_tab_icon_conversation_selected);
                //normal
                contactImage.setImageResource(R.drawable.skin_tab_icon_contact_normal);
trendImage.setImageResource(R.drawable.skin_tab_icon_plugin_normal);

                //标记为“消息”的fragment
                fragment_tag = FRAGMENT_TAB_MSG;
                break;
            case 1:
                //联系人
contactImage.setImageResource(R.drawable.skin_tab_icon_contact_selected);
                //消息和动态 normal
                msgImage.setImageResource(R.drawable.skin_tab_icon_conversation_normal);
trendImage.setImageResource(R.drawable.skin_tab_icon_plugin_normal);

                //标记为“联系人”的fragment
                fragment_tag = FRAGMENT_TAB_CONTACT;
                break;
            case 2:
                //动态
                trendImage.setImageResource(R.drawable.skin_tab_icon_plugin_selected);
                //normal
                contactImage.setImageResource(R.drawable.skin_tab_icon_contact_normal);
                msgImage.setImageResource(R.drawable.skin_tab_icon_conversation_normal);

                fragment_tag = FRAGMENT_TAB_PLUGIN;   //标记为“动态”的fragment
                break;
        }

        //切换fragment
        switchFragment(fragment_tag);
    }

    private void switchFragment(int tag) {
        /*--------------------------------------------------
         *          Fragment不存在则新建
         *-------------------------------------------------*/
        Fragment fragment = null;
        if (tag == FRAGMENT_TAB_MSG) {
            //不存在则新建
            if (msgFragment == null) {
                msgFragment = new MsgFragment();
            }
            fragment = msgFragment;
        } else if (tag == FRAGMENT_TAB_CONTACT) {
            if (contactFragment == null) {
                contactFragment = new ContactFragment();
            }
            fragment = contactFragment;
        } else if (tag == FRAGMENT_TAB_PLUGIN) {
            if (trendFragment == null) {
                trendFragment = new TrendFragment();
            }
            fragment = trendFragment;
        }

        /*--------------------------------------------------
         *          显示或者绑定Fragment
         *    1.如果隐藏，则显示
         *    2.如果第一次使用，add
         *-------------------------------------------------*/
        if (fragment != null) {
            if (fragment.isHidden()) {
                fragmentTransaction.show(fragment);
            } else if (!fragment.isAdded()) {
                fragmentTransaction.add(R.id.content, fragment, tag + "");
            }
        }
        //不为空，切换
        if (fragmentTransaction != null && !fragmentTransaction.isEmpty()) {
            fragmentTransaction.commit();
        }
    }

    /**
     * 将所有的Fragment都置为隐藏状态。
     *
     * @param transaction 用于对Fragment执行操作的事务
     */
    private void hideFragments(FragmentTransaction transaction) {
        if (contactFragment != null) {
            transaction.hide(contactFragment);
        }
        if (msgFragment != null) {
            transaction.hide(msgFragment);
        }
        if (trendFragment != null) {
            transaction.hide(trendFragment);
        }
    }
}