Android自定義頂部欄及側滑菜單和fragment+viewpag滑動切換的實現

嘿嘿嘿，關於android滑動的操做，是否是常常都會用到呢。

我確定也要學習一下啦。

https://blog.csdn.net/u013184970/article/details/82882107

https://blog.csdn.net/qq_35820350/article/details/82460376

在網上學習了一下，這兩篇文章寫的不錯。

來看一下效果

共有4各部分

1.自定義頂部欄

2.側滑菜單

3.彈出菜單

4.標籤滑動切換

進入具體實現環節啦

先引入v4包和圖片加載包

 

    compile 'com.android.support:design:26.1.0'
    //圖片加載
    implementation 'com.github.bumptech.glide:glide:4.2.0'

 

第一 、自定義頂部欄

1.先要將主題設置爲NoActionBar

2.屁顛屁顛去寫佈局咯

三部分構成：左邊按鈕，中間標題，右邊按鈕

res/layout/layout_top_title.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" android:background="@android:color/white">

    <ImageView android:layout_width="45dp" android:layout_height="45dp" android:id="@+id/leftimgview" android:src="@mipmap/tx" android:layout_centerVertical="true" android:padding="10dp"
        />

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/mtext" android:text="首頁" android:textSize="18sp" android:layout_centerInParent="true" android:textColor="@color/colorblack"/>

    <ImageView android:layout_width="45dp" android:layout_height="45dp" android:id="@+id/rightimgview" android:src="@mipmap/menu" android:layout_centerVertical="true" android:layout_alignParentRight="true" android:padding="10dp"/>
    
</RelativeLayout>

3.在你的activity佈局文件中引入

<include layout="@layout/layout_top_title"></include>

4.添加點擊監聽

activity要實現View.OnClickListener接口

private ImageView left,right;//左邊按鈕右邊按鈕
left=findViewById(R.id.leftimgview); right=findViewById(R.id.rightimgview);
//添加監聽 right.setOnClickListener(this); left.setOnClickListener(this);
 　　@Override public void onClick(View view) { switch (view.getId()){ case R.id.rightimgview: break; case R.id.leftimgview: } }

再把圖片變成圓角的

//圖片圓角
Glide.with(this).load(R.mipmap.tx).apply(RequestOptions.bitmapTransform(new RoundedCorners(45))).into(left);

自定義的頂部欄就大功告成，接下來實現側滑菜單

第2、側滑菜單

 用到Navigationview(導航視圖)和Drawerlayout(抽屜佈局)來實現

分析一下：使用抽屜佈局，點擊頂部欄左邊按鈕出現側滑菜單。

側滑菜單分爲兩個部分，一個是頭部區域包括頭像和我的信息，一個是菜單區域。

1.側滑菜單佈局

頭部：res/layout/layout_head.xml  一張圖片，兩行字

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/shape_gradient">

    <ImageView android:id="@+id/person_pic" android:layout_width="75dp" android:layout_height="75dp" android:layout_marginTop="42dp" android:src="@mipmap/tx" />

    <TextView android:id="@+id/companyText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:text="新人養牛" android:textSize="20sp" />

    <TextView android:id="@+id/addressText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="18dp" android:layout_marginTop="12dp" android:text="在線賣牛奶" android:textSize="16sp" />

</LinearLayout>

菜單佈局 這裏要新建一個menu的文件夾 res/menu/menu_navigation.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group1" android:checkableBehavior="single"
        >
        <item android:id="@+id/group_1" android:icon="@mipmap/myinfo" android:title="個人消息" />

        <item android:id="@+id/group_2" android:icon="@mipmap/shop" android:title="商城" />

        <item android:id="@+id/group_3" android:icon="@mipmap/back" android:title="退出登陸" />

    </group >
    <item android:id="@+id/item_1" android:icon="@mipmap/vip" android:title="會員中心" />

    <item android:id="@+id/item_2" android:icon="@mipmap/setting" android:title="設置" />

</menu>

activity佈局

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.steffenxuan.slide.Main2Activity" android:id="@+id/mdw">

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


        <include layout="@layout/layout_top_title"></include>

        <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="hello"/>

    </LinearLayout>

    <android.support.design.widget.NavigationView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="left" android:fitsSystemWindows="true" app:headerLayout="@layout/layout_head" app:menu="@menu/menu_navigation">

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

 2.activity java代碼

private android.support.design.widget.NavigationView navigationview;//導航視圖
private android.support.v4.widget.DrawerLayout drawerlayout;//抽屜
private ImageView person_pic;//側滑菜單頭部的圖片
private TextView companyText;//側滑菜單頭部的文字
private TextView addressText;//側滑菜單頭部的文字

private void initFindId() { navigationview=findViewById(R.id.nav); drawerlayout=findViewById(R.id.mdw); } private void initView() { //監聽側滑菜單按鈕點擊
        navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()){ case R.id.group_1: Toast.makeText(MainActivity.this,"個人消息",Toast.LENGTH_SHORT).show(); break; case R.id.group_2: Toast.makeText(MainActivity.this,"商城",Toast.LENGTH_SHORT).show(); break; case R.id.group_3: Toast.makeText(MainActivity.this,"退出登陸",Toast.LENGTH_SHORT).show(); break; case R.id.item_1: Toast.makeText(MainActivity.this,"會員中心",Toast.LENGTH_SHORT).show(); break; case R.id.item_2: Toast.makeText(MainActivity.this,"設置",Toast.LENGTH_SHORT).show(); break; } drawerlayout.closeDrawer(GravityCompat.START);//點擊菜單後關閉左邊菜單
                return true; } }); } @Override public void onClick(View view) { switch (view.getId()){ case R.id.leftimgview: if(drawerlayout.isDrawerOpen(navigationview)){ drawerlayout.closeDrawer(navigationview);//關閉抽屜
                }else { drawerlayout.openDrawer(navigationview);//打開抽屜
 } break; } }

最重要的：NavigationView沒法經過findviewbyid方法獲取header佈局

　　　　 //側滑菜單中的控件 要先獲取到頭部局才能夠
        if(navigationview.getHeaderCount() > 0){ View headerLayout = navigationview.getHeaderView(0); person_pic = headerLayout.findViewById(R.id.person_pic); companyText=headerLayout.findViewById(R.id.companyText); addressText=headerLayout.findViewById(R.id.addressText); } else { View headerLayout = navigationview.inflateHeaderView(R.layout.layout_head); person_pic = headerLayout.findViewById(R.id.person_pic); companyText=headerLayout.findViewById(R.id.companyText); addressText=headerLayout.findViewById(R.id.addressText); } //圓角
        Glide.with(this).load(R.mipmap.tx).apply(RequestOptions.bitmapTransform(new RoundedCorners(150))).into(person_pic);

這篇文章能夠看一下 https://www.jianshu.com/p/163e0a25f0aa

第3、彈出菜單

 當咱們點擊頂部欄右邊按鈕時彈出菜單

1.菜單佈局 res/menu/menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/one" android:title="第一" app:showAsAction="never"/>
    <item android:id="@+id/two" android:title="第二" app:showAsAction="never"/>
</menu>

2.activity java代碼

　　@Override public void onClick(View view) { switch (view.getId()){ case R.id.rightimgview: showmenu(view); break; } }

public void showmenu(View view){ PopupMenu popupMenu=new PopupMenu(Main2Activity.this,view);//實例化PopupMenu
        getMenuInflater().inflate(R.menu.menu_main,popupMenu.getMenu());//加載Menu資源 //設置菜單監聽
        popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()){ case R.id.one: Toast.makeText(Main2Activity.this,"one",Toast.LENGTH_LONG).show(); return true; case R.id.two: Toast.makeText(Main2Activity.this,"two",Toast.LENGTH_LONG).show(); return true; default: return false; } } }); popupMenu.show();//顯示menu
    }

 第4、TabLayout+ViewPager+Fragment聯動

ViewPager搭配Fragment去實現標籤頁是一種很是常見的作法

1.先建立三個碎片 res/layout/fragment_main.xml

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

    <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="首頁" android:gravity="center"/>

</LinearLayout>

public class FragmentMain extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_main,container,false); return view; } }

剩下兩個和這個一毛同樣，改個名字就ok

2.添加TabLayout和ViewPager

activity佈局，在頂部欄的下面添加

<android.support.design.widget.TabLayout android:background="@android:color/white" android:id="@+id/mtab" android:layout_width="match_parent" android:layout_height="45dp" app:tabIndicatorColor="@android:color/holo_orange_light" app:tabBackground="@android:color/transparent" app:tabGravity="fill" app:tabIndicatorHeight="3dp" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingBottom="8dp"/>

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

 3.activity Java

private TabLayout tabLayout; private ViewPager viewPager; private void initFindId() { tabLayout = findViewById(R.id.mtab); viewPager = findViewById(R.id.mvp); } private void initViewPage() { //添加適配器
            viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { //建立實例
                Fragment fragment=new Fragment(); if(fragment!=null){ switch (position){ case 0: fragment=new FragmentMain(); break; case 1: fragment=new FragmentSecond(); break; case 2: fragment=new FragmentEnd(); break; } } return fragment; } @Override public int getCount() { return 3; } }); //ViewPager關聯到Tablayout中
 tabLayout.setupWithViewPager(viewPager); viewPager.setCurrentItem(0); //設置tabLayout
        tabLayout.getTabAt(0).setCustomView(getTabView("首頁")); tabLayout.getTabAt(1).setCustomView(getTabView("另外一頁")); tabLayout.getTabAt(2).setCustomView(getTabView("最後")); //監聽tabLayout選中
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { View view=tab.getCustomView(); TextView textView = view.findViewById(R.id.tabtxt); textView.setTextColor(Color.parseColor("#ed8200")); textView.setTextSize(16); textView.getPaint().setFakeBoldText(true); } @Override public void onTabUnselected(TabLayout.Tab tab) { View view = tab.getCustomView(); TextView textView = view.findViewById(R.id.tabtxt); textView.setTextColor(Color.parseColor("#999999")); textView.setTextSize(14); } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } 　　　/**
　　　* 得到Tablayout中tab所在的view * @param titleName * @return
     */
    private View getTabView(String titleName) { View view = LayoutInflater.from(this).inflate(R.layout.layout_tab_item, null); TextView textView = view.findViewById(R.id.tabtxt); textView.setText(titleName); 　　　　　//設置默認選中的view if (titleName.equals("首頁")) { textView.setTextColor(Color.parseColor("#ed8200")); textView.setTextSize(16); } return view; }

自定義標題佈局res/layout/layout_tab_item.xml

能夠加入圖標

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tabtxt"/>
</LinearLayout>

到這裏，滑動切換就完成了 這裏有一篇文章設置tablayout樣式的

https://www.jianshu.com/p/2b2bb6be83a8

最後

大部分都會用到這些，剛學習android確定不能落下。

主要是控件Navigationview、Drawerlayout、TabLayout、ViewPager運用

Fragment碎片的加入。

 

附上GitHub地址：https://github.com/steffenx/android-