Material Design風(fēng)格动壤,用一個(gè)小Demo使用下部分控件,先看下最終效果:
話不多說蓬坡,一步步來實(shí)現(xiàn)
- Toolbar
Android開發(fā)中离斩,為了使用自定義的標(biāo)題欄,會(huì)把系統(tǒng)原生的Actionbar隱藏掉抽高,因?yàn)槊總€(gè)Activity最頂部的標(biāo)題欄就是一個(gè)Actionbar判耕,由于設(shè)計(jì)的原因,Actionbar只能位于Activity的頂部厨内,就不能實(shí)現(xiàn)MaterialDesign的一些效果祈秕,那么Toolbar登場了。
要使用Toolbar,需要在android:theme指定一個(gè)AppTheme主題
打開AndroidManifest.xml
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
其中android:theme="@style/AppTheme"就是需要指定的AppTheme主題雏胃,好,點(diǎn)擊進(jìn)去志鞍,來到res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
這里定義了一個(gè)AppTheme的主題瞭亮,指定的parent主題是Theme.AppCompat.Light.DarkActionBar,
要使用Toolbar需要指定一個(gè)不帶ActionBar的主題固棚,通常有兩種主題可選:
Theme.AppCompat.NoActionBar 表示深色主題统翩,即界面的主體顏色為深色,陪襯顏色為淡色此洲;
Theme.appCompat.Light.NoactionBar表示淡色主題厂汗,即界面的主題顏色為淡色陪襯顏色為深色;
這里選擇淡色主題:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
修改activity_main.xml
<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.v7.widget.Toolbar
android:id="@+id/tb_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</LinearLayout>
這里使用了xmlns:app 指定的一個(gè)新的命名空間呜师,是因?yàn)镸aternal Design是在Android 5.0才出現(xiàn)娶桦,所以在小于5.0的系統(tǒng)Material屬性不存在,為了能夠兼容老系統(tǒng)使用app:attribute
@android/ ?android 的區(qū)別:@android引用的是系統(tǒng)的資源汁汗,?android引用的是本應(yīng)用theme內(nèi)的資源
修改 MainActivity
public class MainActivity extends AppCompatActivity {
private Toolbar tbMain;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tbMain = (Toolbar) findViewById(R.id.tb_main);
setSupportActionBar(tbMain);
效果圖:
ToolBar常用功能:
先看效果
實(shí)現(xiàn)如下:
<activity
android:name=".MainActivity"
android:label="Demo">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
android:label=" " 指定顯示在ToolBar中的文字內(nèi)容衷畦,如果沒有指定默認(rèn)顯示應(yīng)用名稱
res/下創(chuàng)建menu文件夾/創(chuàng)建menu_main.xml 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<menu 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"
tools:context=".MainActivity"
>
<item android:id="@+id/action_edit"
android:title="edit"
android:orderInCategory="80"
android:icon="@mipmap/ab_edit"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_share"
android:title="edit"
android:orderInCategory="90"
android:icon="@mipmap/ab_share"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings"
android:title="settings"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
public class MainActivity extends AppCompatActivity {
private Toolbar tbMain;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tbMain = (Toolbar) findViewById(R.id.tb_main);
setSupportActionBar(tbMain);
tbMain.setOnMenuItemClickListener(onMenuItemClick);
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
String msg = "";
switch (item.getItemId()) {
case R.id.action_edit:
msg += "Click edit";
break;
case R.id.action_share:
msg += "Click share";
break;
case R.id.action_settings:
msg += "Click setting";
break;
}
if (!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
};
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}
現(xiàn)在的標(biāo)題默認(rèn)在左邊,有時(shí)候項(xiàng)目需要在中間知牌,這個(gè)也比較容易實(shí)現(xiàn)
首先 toolBar.setTitle(" ");
<android.support.v7.widget.Toolbar
android:id="@+id/tb_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="居中標(biāo)題"
android:textColor="@color/colorWhite" />
</android.support.v7.widget.Toolbar>
- DrawerLayout(滑動(dòng)菜單)
我們先看效果
只要修改布局就可以實(shí)現(xiàn)了祈争;
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
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/tb_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:backgrround="?attr/colorPrimary"
android:text="側(cè)面菜單"
/>
</android.support.v4.widget.DrawerLayout>
注意android:layout_gravity的設(shè)定
我們往側(cè)面菜單中添加布局,這里用到一個(gè)新的控件 NavigationView角寸,老規(guī)矩菩混,先看實(shí)現(xiàn)效果
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
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/tb_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
只需要修改布局忿墅,設(shè)置app:headerLayout app:menu 屬性即可
接下來我們實(shí)現(xiàn)一個(gè)左右滑動(dòng)的效果
- TabLayout+ViewPger來實(shí)現(xiàn)
我們還是先來看效果
我們分析下:上面的標(biāo)簽是TabLayout,下面的內(nèi)容變化是通過ViewPager+Fragment實(shí)現(xiàn)的
- 修改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:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
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/tb_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorPrimary"
/>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorWhite" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
- 切換ViewPager沮峡,顯示不同的Fragment疚脐,這里先用一個(gè)相同的布局
<?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="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
/>
</LinearLayout>
3.創(chuàng)建Fragment
public class PageFragment extends Fragment {
private int mPage;
public static PageFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt("page", page);
PageFragment fragment = new PageFragment();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt("page");
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page,container,false);
TextView textView = (TextView) view.findViewById(R.id.textView);
textView.setText("第"+mPage+"頁");
return view;
}
}
4.adapter
public class ViewPageAdapter extends FragmentPagerAdapter {
private Context mContext;
private String[] titles = new String[]{"Tab1", "Tab2", "Tab3", "Tab4", "Tab5"};
public ViewPageAdapter(FragmentManager fm, Context context) {
super(fm);
this.mContext = context;
}
@Override
public Fragment getItem(int position) {
return PagerFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return 5;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
到這里就實(shí)現(xiàn)上面的效果啦~~~
這里tab注意兩個(gè)小點(diǎn)
- tab的顏色修改
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorPrimary"
app:tabIndicatorColor="@color/ColorYellow"
app:tabSelectedTextColor="@color/ColorYellow"
app:tabTextColor="@color/colorWhite" />
- tab內(nèi)容的顯示和tab的長度
/*
* TabGravity有兩種效果,TabLayout.GRAVITY_CENTER和TabLayout.GRAVITY_FILL
* 前者是居中帖烘,后者是盡可能的填充
* */
tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
/*
* TabMode也有兩種效果亮曹,TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED
* 前者是可滾動(dòng)的tabs,后者是固定的tabs并同時(shí)顯示所以的tabs
* */
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
我們看下前者和后者的實(shí)現(xiàn)效果
革命尚未成功,同志仍需努力秘症,好照卦,我們接著來
我們給他添加點(diǎn)內(nèi)容,這里我只顯示了圖片
-
RecyclerView+CardView添加內(nèi)容
cardview.gif
我們來分析下乡摹,其實(shí)就是不同的frangment顯示了不同的布局
1.首先修改Fragment布局
<?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="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_fg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
2.在修改item的布局
<?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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:elevation="6dp"
app:cardCornerRadius="6dp">
<ImageView
android:id="@+id/iv_picture"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
</LinearLayout>
CardView有兩個(gè)屬性值得注意:app:cardCornerRadius屬性指定圓角的弧度
app:elevation屬性指定卡片的高度
3.RecyclerView設(shè)置顯示
RecyclerView可以實(shí)現(xiàn)ListView役耕、GridView的顯示效果,但是需要通過layoutManager設(shè)置
public class PagerFragment extends Fragment {
private int mPage;
private int[] mData;
public static PagerFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt("page", page);
PagerFragment pagerFragment = new PagerFragment();
pagerFragment.setArguments(args);
return pagerFragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt("page");
mData = new int[]{R.mipmap.n1, R.mipmap.n2, R.mipmap.n3, R.mipmap.n4, R.mipmap.n5, R.mipmap.n6,
R.mipmap.s1, R.mipmap.s2, R.mipmap.s3, R.mipmap.s4, R.mipmap.s5, R.mipmap.s6};
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fg_content, container, false);
RecyclerView rvFg = (RecyclerView) view.findViewById(R.id.rv_fg);
if (mPage == 0) {
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
rvFg.setLayoutManager(linearLayoutManager);
} else if (mPage == 1) {
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
rvFg.setLayoutManager(staggeredGridLayoutManager);
} else if (mPage == 2) {
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2);
rvFg.setLayoutManager(gridLayoutManager);
} else if (mPage == 3) {
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
rvFg.setLayoutManager(linearLayoutManager);
} else if (mPage == 4) {
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
rvFg.setLayoutManager(linearLayoutManager);
}
ItemAdapter itemAdapter = new ItemAdapter(getContext(), mData);
rvFg.setAdapter(itemAdapter);
return view;
}
}
mData是圖片數(shù)組聪廉,圖片是從網(wǎng)上找的瞬痘,放在mipmap里
mPage是第幾個(gè)Fragment,這里不同的Fragment設(shè)置顯示不同的樣式
然后在 ItemAdapter中通過Glide加載圖片
到這里已經(jīng)完成了80%板熊,行百里者半九十框全,保持嚴(yán)謹(jǐn)?shù)膽B(tài)度,我們能讓它更完美
- Toolbar滑動(dòng)隱藏與顯示和CollapsingToolbarLayout(可折疊標(biāo)題欄)
這里就是讓ToolBar上滑的時(shí)候隱藏干签,下拉又顯示出來
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/tb_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@color/ColorYellow"
app:tabSelectedTextColor="@color/ColorYellow"
app:tabTextColor="@color/colorWhite" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorWhite"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
我們只是修改了布局
CoordinatorLayout可以監(jiān)聽所有子控件的的各種事件津辩,同時(shí)也是一個(gè)加強(qiáng)版的FragmentLayout
AppBarLayout是一個(gè)垂直方向的Linearlayout
app:layout_behavior用來處理可滾動(dòng)View與AppbarLayout的聯(lián)動(dòng)
當(dāng)AppBar接收到View滑動(dòng)的時(shí)候,它的子控件就可以指定如何處理這些事件容劳,通過 app:layout_scrollFlags="scroll|enterAlways|snap"指定實(shí)現(xiàn)喘沿,其中scroll表示當(dāng)View上滑的時(shí)候,ToolBar會(huì)一起向上滑動(dòng)并隱藏竭贩,enterAlways表示當(dāng)View下滑的時(shí)候蚜印,ToolBar會(huì)一起向下滑動(dòng)并重新顯示,snap表示當(dāng)ToolBar還沒有完全顯示或隱藏的時(shí)候留量,根據(jù)當(dāng)前的滑動(dòng)距離窄赋,自動(dòng)選擇顯示或隱藏。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context="com.materialdesigndemo.activity.ItemActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/iv_pic_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_item"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Content Content Content Content Content Content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/float_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:scaleType="centerCrop"
app:layout_anchor="@+id/appBar"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
還需要把狀態(tài)欄設(shè)置成透明肪获,res下新建values-21寝凌,在創(chuàng)建styles.xml
<resources>
<style name="itemTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
由于Android5.0之前的系統(tǒng)不能識(shí)別itemTheme,所以需要對(duì)values/styles.xml進(jìn)行修改
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="itemTheme" parent="AppTheme"></style>
</resources>
最后讓ItemAcivity使用這個(gè)主題,修改AndroidManifest.xml
<activity
android:name=".ItemActivity"
android:theme="@style/itemTheme" />
它倆有實(shí)現(xiàn)起來什么區(qū)別呢
很明顯相同點(diǎn)是CoordinatorLayout作為父布局孝赫,都有子控件AppBarLayout和子控件可滾動(dòng)View(通過app:layout_behavior指定布局行為)
不同點(diǎn)是AppBarLayout里的子控件不同较木,標(biāo)題隱藏或顯示是把ToolBar作為AppBarLayout的子控件,通過app:layout_scrollFlags指定實(shí)現(xiàn)青柄;
而可折疊標(biāo)題欄是把CollapsingToolbarLayout作為AppBarLayout的子控件伐债,也是通過app:layout_scrollFlags指定實(shí)現(xiàn)预侯,但是CollapsingToolbarLayout還有兩個(gè)子控件ImageView和ToolBar組成高級(jí)的標(biāo)題欄;
到這里基本功能已經(jīng)實(shí)現(xiàn)了峰锁,在來一個(gè)控件作為結(jié)束
- Snackbar
Snackbar.make(view, "確定點(diǎn)擊萎馅?", Snackbar.LENGTH_SHORT).setAction("確定", new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(ItemActivity.this, "floatOnClick", Toast.LENGTH_SHORT).show();
}
}).show();
用法比較簡單,和Toast差不多虹蒋,個(gè)人覺得是加了一個(gè)再次確認(rèn)的操作防止誤操作糜芳。
好了,就到這里了魄衅,不足之請(qǐng)留言指正峭竣。