使用碎片(Fragment)+FrameLayout(框架布局)实现底部或顶部标签栏的方法

最新推荐文章于 2023-05-22 20:36:04 发布

微笑的语

最新推荐文章于 2023-05-22 20:36:04 发布

阅读量969

点赞数

分类专栏：学习文章标签： java app android 移动开发

本文链接：https://blog.csdn.net/m0_38006057/article/details/118193102

版权

学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天学习了使用碎片(Fragment)及框架布局(FrameLayout)实现底部或顶部标签栏的方法，先将方法总结一下。
首先总的思路为通过自定义布局分别构建底部或者顶部的Tab标签栏，然后再利用Frame框架布局作为视图的容器来动态注册碎片。实质就是实现用户点击底部标签按钮时自动跳转到指定的碎片视图。实现的具体步骤如下（以底部标签栏为例）：
（1）首先新建一个总的布局XML文件：

<?xml version="1.0" encoding="utf-8"?>

<!-设置碎片的容器–>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="60dp"
     >
     <!--四个相对布局表示的为底部四个标签按钮-->
    <RelativeLayout
        android:id="@+id/message_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/message_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
             />

            <TextView
                android:id="@+id/message_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="消息"
                android:textColor="#82858b" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/contacts_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/contacts_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
               />

            <TextView
                android:id="@+id/contacts_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="联系人"
                android:textColor="#82858b" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/news_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/news_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                />

            <TextView
                android:id="@+id/news_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="动态"
                android:textColor="#82858b" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/setting_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/setting_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
               />

            <TextView
                android:id="@+id/setting_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="设置"
                android:textColor="#82858b" />
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

（2）新建4个碎片，设置好碎片对应的布局文件及Java类文件。重写碎片的onCreateView（）方法。（3）在主视图的Java类中实现标签的按钮的点击事件。当用户点击相应按钮时，像 FrameLayout中动态添加碎片。其中主视图Java类的需要实现的方法思路如下:(其中核心的方法是setTabSelection()).碎片的动态添加主要依懒于FragmentManager碎片处理器及FragmentTransaction

public class MainActivity extends Activity implements OnClickListener {
/**
* 用于展示消息的Fragment
*/
private MessageFragment messageFragment;

/**
 * 用于展示联系人的Fragment
 */
private ContactsFragment contactsFragment;

/**
 * 用于展示动态的Fragment
 */
private NewsFragment newsFragment;

/**
 * 用于展示设置的Fragment
 */
private SettingFragment settingFragment;

/**
 * 消息界面布局
 */
private View messageLayout;

/**
 * 联系人界面布局
 */
private View contactsLayout;

/**
 * 动态界面布局
 */
private View newsLayout;

/**
 * 设置界面布局
 */
private View settingLayout;

/**
 * 在Tab布局上显示消息图标的控件
 */
private ImageView messageImage;

/**
 * 在Tab布局上显示联系人图标的控件
 */
private ImageView contactsImage;

/**
 * 在Tab布局上显示动态图标的控件
 */
private ImageView newsImage;

/**
 * 在Tab布局上显示设置图标的控件
 */
private ImageView settingImage;

/**
 * 在Tab布局上显示消息标题的控件
 */
private TextView messageText;

/**
 * 在Tab布局上显示联系人标题的控件
 */
private TextView contactsText;

/**
 * 在Tab布局上显示动态标题的控件
 */
private TextView newsText;

/**
 * 在Tab布局上显示设置标题的控件
 */
private TextView settingText;

/**
 * 用于对Fragment进行管理
 */
private FragmentManager fragmentManager;

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() {
    messageLayout = findViewById(R.id.message_layout);
    contactsLayout = findViewById(R.id.contacts_layout);
    newsLayout = findViewById(R.id.news_layout);
    settingLayout = findViewById(R.id.setting_layout);
    messageImage = (ImageView) findViewById(R.id.message_image);
    contactsImage = (ImageView) findViewById(R.id.contacts_image);
    newsImage = (ImageView) findViewById(R.id.news_image);
    settingImage = (ImageView) findViewById(R.id.setting_image);
    messageText = (TextView) findViewById(R.id.message_text);
    contactsText = (TextView) findViewById(R.id.contacts_text);
    newsText = (TextView) findViewById(R.id.news_text);
    settingText = (TextView) findViewById(R.id.setting_text);
    messageLayout.setOnClickListener(this);
    contactsLayout.setOnClickListener(this);
    newsLayout.setOnClickListener(this);
    settingLayout.setOnClickListener(this);
}

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

/**
 * 根据传入的index参数来设置选中的tab页。
 * 
 * @param index
 *            每个tab页对应的下标。0表示消息，1表示联系人，2表示动态，3表示设置。
 */
private void setTabSelection(int index) {
    // 每次选中之前先清楚掉上次的选中状态
    clearSelection();
    // 开启一个Fragment事务
    FragmentTransaction transaction = fragmentManager.beginTransaction();
    // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
    hideFragments(transaction);
    switch (index) {
    case 0:
        // 当点击了消息tab时，改变控件的图片和文字颜色
        messageImage.setImageResource(R.drawable.message_selected);
        messageText.setTextColor(Color.WHITE);
        if (messageFragment == null) {
            // 如果MessageFragment为空，则创建一个并添加到界面上
            messageFragment = new MessageFragment();
            transaction.add(R.id.content, messageFragment);
        } else {
            // 如果MessageFragment不为空，则直接将它显示出来
            transaction.show(messageFragment);
        }
        break;
    case 1:
        // 当点击了联系人tab时，改变控件的图片和文字颜色
        contactsImage.setImageResource(R.drawable.contacts_selected);
        contactsText.setTextColor(Color.WHITE);
        if (contactsFragment == null) {
            // 如果ContactsFragment为空，则创建一个并添加到界面上
            contactsFragment = new ContactsFragment();
            transaction.add(R.id.content, contactsFragment);
        } else {
            // 如果ContactsFragment不为空，则直接将它显示出来
            transaction.show(contactsFragment);
        }
        break;
    case 2:
        // 当点击了动态tab时，改变控件的图片和文字颜色
        newsImage.setImageResource(R.drawable.news_selected);
        newsText.setTextColor(Color.WHITE);
        if (newsFragment == null) {
            // 如果NewsFragment为空，则创建一个并添加到界面上
            newsFragment = new NewsFragment();
            transaction.add(R.id.content, newsFragment);
        } else {
            // 如果NewsFragment不为空，则直接将它显示出来
            transaction.show(newsFragment);
        }
        break;
    case 3:
    default:
        // 当点击了设置tab时，改变控件的图片和文字颜色
        settingImage.setImageResource(R.drawable.setting_selected);
        settingText.setTextColor(Color.WHITE);
        if (settingFragment == null) {
            // 如果SettingFragment为空，则创建一个并添加到界面上
            settingFragment = new SettingFragment();
            transaction.add(R.id.content, settingFragment);
        } else {
            // 如果SettingFragment不为空，则直接将它显示出来
            transaction.show(settingFragment);
        }
        break;
    }
    transaction.commit();
}

/**
 * 清除掉所有的选中状态。
 */
private void clearSelection() {
    messageImage.setImageResource(R.drawable.message_unselected);
    messageText.setTextColor(Color.parseColor("#82858b"));
    contactsImage.setImageResource(R.drawable.contacts_unselected);
    contactsText.setTextColor(Color.parseColor("#82858b"));
    newsImage.setImageResource(R.drawable.news_unselected);
    newsText.setTextColor(Color.parseColor("#82858b"));
    settingImage.setImageResource(R.drawable.setting_unselected);
    settingText.setTextColor(Color.parseColor("#82858b"));
}

/**
 * 将所有的Fragment都置为隐藏状态。
 * 
 * @param transaction
 *            用于对Fragment执行操作的事务
 */
private void hideFragments(FragmentTransaction transaction) {
    if (messageFragment != null) {
        transaction.hide(messageFragment);
    }
    if (contactsFragment != null) {
        transaction.hide(contactsFragment);
    }
    if (newsFragment != null) {
        transaction.hide(newsFragment);
    }
    if (settingFragment != null) {
        transaction.hide(settingFragment);
    }
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

}

微笑的语

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
使用碎片(Fragment)+FrameLayout(框架布局)实现底部或顶部标签栏的方法

今天学习了使用碎片(Fragment)及框架布局(FrameLayout)实现底部或顶部标签栏的方法，先将方法总结一下。首先总的思路为通过自定义布局分别构建底部或者顶部的Tab标签栏，然后再利用Frame框架布局作为视图的容器来动态注册碎片。实质就是实现用户点击底部标签按钮时自动跳转到指定的碎片视图。实现的具体步骤如下（以底部标签栏为例）：（1）首先新建一个总的布局XML文件： <?xml version="1.0" encoding="utf-8"?><!-设置碎片的容器–&
复制链接

扫一扫