當前位置：首頁 > 运维知识 > Android >内容正文

Android

Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现

發布時間：2025/3/14 Android 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="50dp"android:background="@android:color/white"><ImageViewandroid:layout_width="45dp"android:layout_height="45dp"android:id="@+id/leftimgview"android:src="@mipmap/tx"android:layout_centerVertical="true"android:padding="10dp"/><TextViewandroid: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"/><ImageViewandroid: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布局文件中引入

4.添加點擊監聽

activity要實現View.OnClickListener接口

private ImageView left,right;//左邊按鈕右邊按鈕 left=findViewById(R.id.leftimgview); right=findViewById(R.id.rightimgview);
//添加監聽 right.setOnClickListener(this); left.setOnClickListener(this);
@Overridepublic 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);

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

第二、側滑菜單

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

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

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

1.側滑菜單布局

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

<LinearLayoutxmlns: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"><ImageViewandroid:id="@+id/person_pic"android:layout_width="75dp"android:layout_height="75dp"android:layout_marginTop="42dp"android:src="@mipmap/tx" /><TextViewandroid:id="@+id/companyText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="24dp"android:text="新人養牛"android:textSize="20sp" /><TextViewandroid: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

activity布局

<android.support.v4.widget.DrawerLayoutxmlns: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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><include layout="@layout/layout_top_title"></include><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="hello"/></LinearLayout><android.support.design.widget.NavigationViewxmlns: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() {@Overridepublic 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;}});}@Overridepublic 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

第三、彈出菜單

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

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

2.activity java代碼

　　@Overridepublic 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);//實例化PopupMenugetMenuInflater().inflate(R.menu.menu_main,popupMenu.getMenu());//加載Menu資源//設置菜單監聽popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {@Overridepublic 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}

?第四、TabLayout+ViewPager+Fragment聯動

ViewPager搭配Fragment去實現標簽頁是一種非常常見的做法

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

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="首頁"android:gravity="center"/></LinearLayout> public class FragmentMain extends Fragment {@Nullable@Overridepublic 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.TabLayoutandroid: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.ViewPagerandroid: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()) {@Overridepublic 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;}@Overridepublic int getCount() {return 3;}});//ViewPager關聯到Tablayout中 tabLayout.setupWithViewPager(viewPager);viewPager.setCurrentItem(0); //設置tabLayouttabLayout.getTabAt(0).setCustomView(getTabView("首頁"));tabLayout.getTabAt(1).setCustomView(getTabView("另一頁"));tabLayout.getTabAt(2).setCustomView(getTabView("最后"));//監聽tabLayout選中tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic 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);}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {View view = tab.getCustomView();TextView textView = view.findViewById(R.id.tabtxt);textView.setTextColor(Color.parseColor("#999999"));textView.setTextSize(14);}@Overridepublic 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);//設置默認選中的viewif (titleName.equals("首頁")) {textView.setTextColor(Color.parseColor("#ed8200"));textView.setTextSize(16);}return view;}

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

可以加入圖標

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"><TextViewandroid: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-

轉載于:https://www.cnblogs.com/Steffen-xuan/p/11248348.html

總結

以上是生活随笔為你收集整理的Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： IDEA修改Servlet的代码生成模板
下一篇： Android高效编程注意事项