NavigationView+ToolBar+TabLayout+ViewPager+Fragment綜合使用

NavigationView:側滑菜單

ToolBar:標題欄

TabLayout:頂部導航

ViewPager:左右切換當前(滑動)view

1.activity_main界面分析(側滑菜單:NavigationView+內容View:ToolBar(代替ActionBar)+TabLayout(導航)+ViewPager(輪播圖))

2. ToolBar使用

3. DrawerLayout使用同等於NavigationView

4. NavigationView使用(添加布局即可出現測滑菜單)

需要添加依賴： design

app:headerLayout：導航視圖的頭佈局

app:menu：導航視圖的菜單部分

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_gravity="start"
android:layout_width="wrap_content"
app:menu="@menu/activity_main_drawer"
app:headerLayout="@layout/nav_header"
android:layout_height="match_parent"/>

注意:

5.NavigationView的監聽事件(點擊交互)

(1)findViewById找到該控件

NavigationView navView= (NavigationView) findViewById(R.id.nav_view);

(2)使所在類繼承OnNavigationItemSelectedListener

MainActivity extendsAppCompatActivityimplementsNavigationView.OnNavigationItemSelectedListener

(3)設置監聽器

navView.setNavigationItemSelectedListener(this);

(4)重寫onNavigationItemSelected方法實現監聽

小細節:引入DrawerLayout實現側滑菜單的關閉:

(1)findViewById找到該控件

(2)設置closeDrawers方法即可

@Override
public booleanonNavigationItemSelected(@NonNullMenuItem item) {

drawableLayout.closeDrawers();//單擊側滑菜單,關閉抽屜，隱藏菜單
item.setChecked(true);//設置當前的菜單項爲選中狀態高亮顯示
switch(item.getItemId()){
case  R.id.nav_camera:
    Toast.makeText(this, "拍照", Toast.LENGTH_SHORT).show();
    break;
case  R.id.nav_gallery:
    Toast.makeText(this, "gallery", Toast.LENGTH_SHORT).show();
    break;

case  R.id.nav_manage:
    Toast.makeText(this, "manage", Toast.LENGTH_SHORT).show();
    break;
}
return false;
}

5.能夠獨立使用ToolBar (ActionBar操作欄,5.0以後用Toolbar取代 )能自動添加應用名稱作爲頭部

(0)佈局文件中書寫內容

<!--Toolbar ：取代Actionbar，比ActionBar更靈活-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@color/colorPrimary"
android:layout_height="wrap_content"/>

(1)findViewById找到該控件

Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);

(2)初始化Toolbar,設置背景顏色(佈局文件中設置)以及字體顏色(代碼設置)

//初始化Toolbar，注意在setSupportActionBar之前初始化Toolbar
//設置Toolbar標題顏色
toolbar.setTitleTextColor(Color.WHITE);

//初始化Toolbar，注意在setSupportActionBar之前初始化Toolbar
//設置Toolbar標題顏色
toolbar.setTitleTextColor(Color.WHITE);

6.設置Toolbar的導航圖標同步效果(自動添加導航圖標,點擊圖標會打開側滑菜單,點擊側滑菜單以外部分會關閉側滑菜單,當拉動側滑菜單時,ToolBar有一個動的效果,即側滑菜單與ToolBar按鈕進行關聯)

// 參數1 當前actionBar所在的activity
// 參數2 控制是哪個抽屜
// 參數3 ToolBar
// 參數4 抽屜打開的描述
// 參數5 抽屜關閉的描述
ActionBarDrawerToggle barDrawerToggle=newActionBarDrawerToggle(this,drawableLayout,toolbar,R.string.drawer_open,R.string.drawer_close);
barDrawerToggle.syncState();//同步狀態
//設置狀態更新的監聽
drawableLayout.addDrawerListener(barDrawerToggle);

將ToolBar的按鈕顏色變成白色(默認爲黑色)

添加style中的屬性:

(1)增加一種繼承自Widget.AppCompat.DrawerArrowToggle的style，這裏叫做"DrawerArrowStyle"。在裏面加上你想要的顏色

<stylename="DrawerArrowStyle"parent="Widget.AppCompat.DrawerArrowToggle">
<itemname="color">@color/colorWhite</item>
</style>

(2)在 style "AppTheme" 中增加一行名爲 drawerArrowStyle 的這種 style。

<itemname="drawerArrowStyle">@style/DrawerArrowStyle</item>

(3)改變Navigation內容的顏色使之改變仍然有狀態變化:添加狀態選擇器(selector)

7.使用TabLayout(導航滑動)

(0)佈局文件中書寫內容

TabLayout:

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
app:tabBackground="@color/colorPrimary"
app:tabSelectedTextColor="#ff0000"
android:layout_height="wrap_content"/>

ViewPager

<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

(1)findViewById找到TabLayout控件並設置模式以及綁定ViewPager

TabLayout tabLayout= (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setTabMode((TabLayout.MODE_SCROLLABLE));//滾動模式
//與ViewPager 綁定在一起 ,TabLayout的頁籤標題通過PagerAdpater的getPagerTitle（）來取得
tabLayout.setupWithViewPager(viewPager);

(2)findViewById找到TabLayout控件並設置適配器並書寫7個片段繼承一個基片段

TabLayout tabLayout= (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setTabMode((TabLayout.MODE_SCROLLABLE));//滾動模式
//與ViewPager 綁定在一起 ,TabLayout的頁籤標題通過PagerAdpater的getPagerTitle（）來取得
tabLayout.setupWithViewPager(viewPager);

以下是詳細的代碼:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<!--抽屜佈局-->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drag_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"/>


       <android.support.design.widget.TabLayout
           android:id="@+id/tablayout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:tabBackground="@color/colorPrimary"
           app:tabSelectedTextColor="#f00"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_gravity="start"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:menu="@menu/activity_main_drawer"
        app:headerLayout="@layout/nav_header"/>
</android.support.v4.widget.DrawerLayout>

nav_head.xml

<?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="160dp"
    android:background="@color/colorPrimary"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:paddingTop="16dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:text="標題欄"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:text="副標題欄" />
</LinearLayout>
activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

MainActivity

public class MainActivity extends AppCompatActivity   implements NavigationView.OnNavigationItemSelectedListener{
    private NavigationView mNav;
    private DrawerLayout mDrawerLayout;
    private Toolbar mToolBar;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;

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

        mNav = (NavigationView) findViewById(R.id.nav);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drag_layout);
        mNav.setNavigationItemSelectedListener(this);

        mToolBar = (Toolbar) findViewById(R.id.toolbar);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mToolBar.setTitleTextColor(Color.WHITE);//設置toolbar字體顏色爲白色
        mToolBar.setSubtitleTextColor(Color.WHITE);
        //取代actionbar
        setSupportActionBar(mToolBar);
        //將navigation與ToolBar關聯,按住toolbar按鈕,彈出側滑菜單
          // 參數1 當前actionBar所在的activity
        // 參數2 控制是哪個抽屜
          // 參數3  ToolBar
        // 參數4 抽屜打開的描述
          // 參數5 抽屜關閉的描述
        ActionBarDrawerToggle barDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,mToolBar,R.string.drawer_open,R.string.drawer_close);
        barDrawerToggle.syncState();//同步狀態
        //設置狀態更新的監聽
        mDrawerLayout.addDrawerListener(barDrawerToggle);
        MainFragmentAdapter adapter=new MainFragmentAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
        mTabLayout.setTabMode((TabLayout.MODE_SCROLLABLE));//設置TabLayout的模式爲滾動模式
        //與viepager進行綁定,TabLayout的標籤頁通過PagerAdapter的getPagerTitle方法獲取
        mTabLayout.setupWithViewPager(mViewPager);
    }

    /**
     * navigation的監聽事件
     * @param item
     * @return
     */
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        mDrawerLayout.closeDrawers();//單擊側滑菜單,關閉側滑菜單,隱藏側滑菜單
        item.setCheckable(true);//設置選項可選
        item.setChecked(true);//設置當前的菜單項爲選中狀態
        switch (item.getItemId()){
            case  R.id.nav_camera:
                Toast.makeText(this, "拍照", Toast.LENGTH_SHORT).show();
                break;
            case  R.id.nav_gallery:
                Toast.makeText(this, "gallery", Toast.LENGTH_SHORT).show();
                break;

            case  R.id.nav_manage:
                Toast.makeText(this, "manage", Toast.LENGTH_SHORT).show();
                break;

        }
        return false;
    }
}

MainFragmentAdapter

public class MainFragmentAdapter extends FragmentPagerAdapter {
    private  String[] TABLAYOUT_ID={"首頁","推薦","專題","遊戲","熱點","分類","App"};
    public MainFragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        BaseFragment fragment=null;
        switch (position){
            case  0:
                fragment=new HomeFragement();
                break;
            case  1:
                fragment=new RecommendFragement();
                break;
            case  2:
                fragment=new SubjectFragement();
                break;
            case  3:
                fragment=new GameFragement();
                break;

            case  4:
                fragment=new HotFragement();
                break;
            case 5:
                fragment=new CategoryFragment();
                break;
            case 6:
                fragment=new AppFragement();
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return TABLAYOUT_ID.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return TABLAYOUT_ID[position];
    }
}
BaseFragment
public class BaseFragment  extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        TextView tv=new TextView(getActivity());
        String msg = this.getClass().getSimpleName();
        tv.setGravity(Gravity.CENTER);
        tv.setTextSize(16);
        tv.setText(msg);
        return tv;
    }
}

HomeFragement

public class HomeFragement   extends BaseFragment{

}

其餘六個頁面與HomeFragment都是相似的,此處就不將代碼一一貼出來

Demo下載網址:http://download.csdn.net/detail/k2514091675/9764176

NavigationView+ToolBar+TabLayout+ViewPager+Fragment綜合使用

自定義控件SlidingButton(開關)

activity顯示意圖跳轉

NavigationView+ToolBar+TabLayout+ViewPager+Fragment綜合使用

DrawerLayout實現側滑以及將側滑頁面與主內容頁面進行關聯

eclipse新建項目後R文件出錯

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結