Android Appbarlayout 程序欄布局組件及NestedScollView組件使用
阿新 • • 發佈:2019-03-05
tablayout gac mce 技術 void eight rcc java sequence
1.導入AppBarLayout組件(點擊下載按鈕,安裝組件)
2.選中AppBarLayout 右擊Add to Design,按照下圖勾選,點擊Ok即可。
3.組件樹結構
有上圖可見,AppBarLayout組件集成了TabLayout和ToolBar組件
4.在ToolBar組件中手動添加ImageView 組件
<android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_scrollFlags="scroll|enterAlways"> <ImageView android:src="@mipmap/ic_launcher" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.v7.widget.Toolbar>
5.實現多圖滾動顯示效果(利用NestedScollView組件)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" app:srcCompat="@mipmap/img4" /> <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" app:srcCompat="@mipmap/img1" /> <ImageView android:id="@+id/imageView3" android:scaleType="fitXY" android:layout_width="match_parent" android:layout_height="match_parent" app:srcCompat="@mipmap/img3" /> <ImageView android:id="@+id/imageView4" android:scaleType="fitXY" android:layout_width="match_parent" android:layout_height="match_parent" app:srcCompat="@mipmap/img2" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> </LinearLayout>
6.整體的xml文件
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_height="wrap_content" android:layout_width="match_parent"> <android.support.v7.widget.Toolbar android:gravity="center" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_scrollFlags="scroll|enterAlways"> <ImageView android:src="@mipmap/ic_launcher" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|enterAlways" app:tabMode="scrollable"> <android.support.design.widget.TabItem android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Tab1" /> <android.support.design.widget.TabItem android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Tab2" /> <android.support.design.widget.TabItem android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Tab3" /> </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true" app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"> <android.support.v4.view.ViewPager android:id="@+id/viewpage1" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@android:drawable/ic_input_add" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:clickable="true" /> </android.support.design.widget.CoordinatorLayout>
註意:
若不能出現滑動頁面,則應該在NestedScrollView組件xml設置他的屬性
android:fillViewport="true"
7.java後臺代碼
import android.support.annotation.Nullable; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { TabLayout tabLayout; ViewPager viewPager; List<Fragment> fragments; //定義一個列表集合(應用泛型) String[] table={"新聞","財經","娛樂"}; //定義一個數組存放標題內容 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout=findViewById(R.id.tabs); viewPager=findViewById(R.id.viewpage1); fragments=new ArrayList<>(); //實例化集合 fragments.add(new MyFragment1()); fragments.add(new MyFragment2()); fragments.add(new MyFragment3()); Adapter adapter=new Adapter(getSupportFragmentManager(),fragments);//參數1為fragment管理器 viewPager.setAdapter(adapter);//給viewPager設置適配器 tabLayout.setupWithViewPager(viewPager);//將tabLayout與viewPager建立匹配 } //創建一個內部類作為適配器 public class Adapter extends FragmentPagerAdapter { private List<Fragment> list; public Adapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list=list; } @Override public Fragment getItem(int position) { return list.get(position); } @Override public int getCount() { return list.size(); } @Nullable @Override public CharSequence getPageTitle(int position) { return table[position]; } } }
Android Appbarlayout 程序欄布局組件及NestedScollView組件使用