自定义导航条的viewpager+fragment

最新推荐文章于 2022-01-12 00:01:25 发布

to-two-to

最新推荐文章于 2022-01-12 00:01:25 发布

阅读量1k

点赞数 2

分类专栏：安卓文章标签： android viewpager导航 fragment

本文链接：https://blog.csdn.net/u011001723/article/details/42644989

版权

本文介绍如何自定义viewpager的导航条，以实现更美观的效果。首先，引入android.support.v4库，创建自定义的fragment。接着，设计布局文件，包含自定义导航条和viewpager。在Activity中，通过设置适配器和OnPageChangeListener监听页面滑动，动态调整导航条位置。最后，添加选项卡点击事件以完成交互。

摘要由CSDN通过智能技术生成

相信大家都知道viewpager这个控件,最近因为项目需要,要把viewpager的导航条做的更美观一些,那么我们只好自己定义viewpager那丑陋的自带的导航条了

想要使用viewpager，首先我们需要一个android.support.v4的jar包

首先，我们先要拥有我们自己的fragment

dept_information.xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#fffe00">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="部门动态"/>
</LinearLayout>

DeptInformationFragment类,此时需要注意的是,fragment的包不要倒错，是android.support.v4.app包下的Fragment

package com.dl.news.ui.Fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.dl.news.R;
import com.dl.news.ui.BaseSupportV4Fragment;

/**
 * @author   王光东
 * @des      部门动态Fragment
 * @date     2015年1月6日12:53:32
 * @version  v1.0
 */
public class DeptInformationFragment extends BaseSupportV4Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater ,ViewGroup container,Bundle savedInstanceSate){
        return inflater.inflate(R.layout.dept_information, container ,false);
    }
}

其他的fragment类和xml类似.就不贴代码了.这里只做个示范。

然后我们去做Activity的xml视图,该视图中包括了我们自定义的导航条和viewpager控件

上面是我们定义个的四个选项卡

下面是我们的viewpager控件（用于承载我们的fragment）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >


    <!-- 主界面 -->
    <LinearLayout
            android:orientation="vertical"
            android:id="@+id/home_fragment_content"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#fff">
        

        <LinearLayout
                android:id="@+id/id_switch_tab_ll"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:baselineAligned="false"
                >
            <LinearLayout
                    android:id="@+id/home_top_sliding_menu_ll"
                    android:layout_width="36dp"
                    android:layout_height="21dp"
                    android:background="@drawable/guide_round_selector"
                    android:gravity="center"
                    android:layout_gravity="center"
                    android:orientation="horizontal"
                    android:layout_marginRight="4dp"
                    android:layout_marginLeft="6dp">
                <ImageView android:id="@+id/home_top_sliding_menu"
                           android:src="@drawable/main_top_sliding_menu"
                           android:layout_width="36dp"
                           android:layout_height="21dp"/>
            </LinearLayout>

            <LinearLayout
                    android:id="@+id/id_tab_chat_ll"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/guide_round_selector"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="10dip" >

                <TextView
                        android:id="@+id/id_news_tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="@string/home_menu_one_tab"
                        android:textColor="#FF2829"
                        android:textSize="15dip" />
            </LinearLayout>

            <LinearLayout
                    android:id="@+id/id_tab_leader_ll"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:clickable="true"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="10dip"
                    android:saveEnabled="false"
                    android:background="@drawable/guide_round_selector" >

                <TextView
                        android:id="@+id/id_leader_tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="@string/home_menu_two_tab"
                        android:textColor="#000000"
                        android:textSize="15dip" />
            </LinearLayout>

            <Lin