`

Design各控件的搭配使用2

阅读更多
在上个版本的基础上增加个几个控件:
DrawerLayout+ActionBarDrawerToggle----->左侧Drawer的实现,比Android自带的更强大的MaterialDrawer
NavigationView





<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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity" >

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true" >

        <!-- 第一部分:伸缩工具栏 -->
        <!-- AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view -->
        <!-- AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,就可以在RecyclerView滚动事件发生的时候被触发: -->
        <!-- app:layout_scrollFlags属性里面必须至少启用scroll这个flag,这样这个view才会滚动出屏幕,否则它将一直固定在顶部。 -->
        <!--
	可以使用的其他flag有:
		enterAlways: 一旦向上滚动这个view就可见。
		enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
		exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。
        -->
        <!-- 记住,要把带有scroll flag的view放在前面,这样收回的view才能让正常退出,而固定的view继续留在顶部。 -->

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

            <!-- 如果想制造toolbar的折叠效果,我们必须把Toolbar放在CollapsingToolbarLayout中: -->
            <!-- 通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置在CollapsingToolBarLayout上,而不是Toolbar。 -->
            <!-- 给需要有折叠效果的组件设置 layout_collapseMode属性 -->
            <!-- Toolbar 的高度layout_height必须固定,不能 “wrap_content”,否则Toolbar不会滑动,也没有折叠效果 -->

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp" >

                <!-- 制造视差效果 -->
                <!-- CollapsingToolbarLayout还能让我们做出更高级的动画,比如在里面放一个ImageView,然后在它折叠的时候渐渐淡出。同时在用户滚动的时候title的高度也会随着改变。 -->
                <!-- 为了制造出这种效果,我们添加一个定义了app:layout_collapseMode="parallax" 属性的ImageView。 -->

                <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax"
                    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    android:src="@drawable/ic_launcher" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
                    app:titleTextAppearance="@style/TextAppearance.AppCompat.Headline" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <!-- FloatingActionButton继承自ImageView;backgroundTint背景颜色,默认的背景颜色是Theme主题中的; elevation阴影的深度 -->

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_anchor="@id/recyclerView"
            app:layout_anchorGravity="bottom|right|end"
            app:layout_behavior="com.mb.widget.ScrollAwareFABBehavior"
            android:src="@drawable/ic_launcher"
            app:backgroundTint="#CCCC00"
            app:elevation="16dp"
            app:fabSize="normal" />

        <!-- 为了能让FloatingActionButton也能折叠且消失出现,我们必须给FAB设置锚点属性app:layout_anchor="@id/appbar" -->

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|right|end"
            android:src="@drawable/ic_launcher"
            app:backgroundTint="#CC00CC"
            app:fabSize="normal" />
    </android.support.design.widget.CoordinatorLayout>

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



import java.util.Arrays;

import com.mb.widget.Cheeses;
import com.mb.widget.SimpleStringRecyclerViewAdapter;

import android.content.Context;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.NavigationView.OnNavigationItemSelectedListener;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

/**
 * http://www.open-open.com/lib/view/open1437312265428.html
 * @author pythoner
 *
 */
public class MainActivity extends AppCompatActivity {

	private Context context;
	private ActionBarDrawerToggle drawerToggle;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		context=this;
		
		Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
		//使用了ActionBarDrawerToggle之后,下面的设置可以不用
		// App Logo
//        toolbar.setLogo(R.drawable.ic_launcher);
        // Title
//        toolbar.setTitle("App Title");
        // Sub Title
//        toolbar.setSubtitle("Sub title");
        //Navigation Icon
//        toolbar.setNavigationIcon(R.drawable.ic_launcher);
        
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        
        final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open,  R.string.drawer_close);  
        drawerToggle.syncState();  
        drawerLayout.setDrawerListener(drawerToggle);
        
        final NavigationView navigationView = (NavigationView) findViewById(R.id.navigationView);
        navigationView.setNavigationItemSelectedListener(new OnNavigationItemSelectedListener() {
			
			@Override
			public boolean onNavigationItemSelected(MenuItem item) {
				// TODO Auto-generated method stub
				Toast.makeText(context,  item.getTitle(), Toast.LENGTH_SHORT).show();
				return false;
			}
		});
        
        final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
        //通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置在CollapsingToolBarLayout上,而不是Toolbar。
        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("Title");
        
        FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.floatingActionButton);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub

				final Snackbar snackbar = Snackbar.make(coordinatorLayout, "测试弹出提示", Snackbar.LENGTH_LONG);
				snackbar.show();
				snackbar.setAction("取消", new View.OnClickListener() {
					@Override
					public void onClick(View v) {
						snackbar.dismiss();
					}
				});

			}
		});
        
		RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setAdapter(new SimpleStringRecyclerViewAdapter(this,Arrays.asList(Cheeses.sCheeseStrings)));
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        
        
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
	
	/** 设备配置改变时 */    
    @Override    
    public void onConfigurationChanged(Configuration newConfig) {    
        super.onConfigurationChanged(newConfig);    
        drawerToggle.onConfigurationChanged(newConfig);    
    }    
    
}


去掉了style.xml中的一些设置
<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.

        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <!-- Theme.AppCompat.Light.NoActionBar -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <!-- 导航栏底色 -->
        <item name="colorPrimary">@color/accent_material_dark</item>
        <!-- 状态栏底色-->
        <item name="colorPrimaryDark">@color/accent_material_light</item>
        
        <!-- 导航栏上的标题颜色 -->
 		<!-- Activity窗口的颜色 -->
 		<!-- 按钮选中或者点击获得焦点后的颜色 -->
 		<!-- 和 colorAccent相反,正常状态下按钮的颜色 -->
 		<!-- Button按钮正常状态颜色 -->
 		<!-- EditText 输入框中字体的颜色 -->
 		<!-- 
        <item name="android:textColorPrimary">@android:color/black</item>
        <item name="android:windowBackground">@color/material_blue_grey_800</item>
        <item name="colorAccent">#00ff00</item>
        <item name="colorControlNormal">#ff0000</item>
        <item name="colorButtonNormal">@color/accent_material_light</item>
        <item name="editTextColor">@android:color/darker_gray</item>
 		 -->
    </style>

</resources>


背景模糊的Navigation Drawer。可以设置参数达到不同的模糊效果
https://github.com/charbgr/BlurNavigationDrawer
  • 大小: 171 KB
  • Test.rar (9.6 MB)
  • 描述: android5.1.1编译
  • 下载次数: 2
分享到:
评论

相关推荐

    Design各控件的搭配使用

    需要android5.1.1编译 博文链接:https://gundumw100.iteye.com/blog/2237850

    Design各控件的搭配使用3

    android5.1.1编译,需要v7-appcompat,design等扩展包 博文链接:https://gundumw100.iteye.com/blog/2238641

    Design各控件的搭配使用4

    android5.1.1编译,需要v7-appcompat,design等扩展包 博文链接:https://gundumw100.iteye.com/blog/2238754

    Material Design + MVP + RxJava2 + Retrofit + Dagger2 + Realm + Glide + Kotlin

    使用Material Design控件和动画 使用MVP架构整个项目,对应于model、ui、presenter三个包 使用Dagger2将M层注入P层,将P层注入V层,无需new,直接调用对象 使用Realm做阅读记录和收藏记录的增、删、查、改 使用Glide...

    Formula_One_6_最新破解版.zip

    First Impression可单独使用或与Formula One配合使用,完 成图表的功能,是市面上常见图表控件中表现形式最为非富的一个. F1 6.0和FI 6.0和PowerBuilder类似,本身就有几个国家语言的版本,可以在其网站下载,但并没有...

    Android项目源码极客日报一款纯粹的阅读App.zip

    使用Material Design控件和动画 使用MVP架构整个项目,对应于model、ui、presenter三个包 使用Dagger2将M层注入P层,将P层注入V层,无需new,直接调用对象 使用Realm做阅读记录和收藏记录的增、删、查、改 使用...

    Formula_One_6_破解版

    First Impression可单独使用或与Formula One配合使用,完成图表的功能,是市面上常见图表控件中表现形式最为非富的一个. F1 6.0和FI 6.0和PowerBuilder类似,本身就有几个国家语言的版本,可以在其网站下载,但并没有...

    Android MarginDesign控件TabLayout导航栏使用详解

    比如在平常的项目中实现这样的效果,一般都是都会使用viewPageIndicate等几个开源框架直接实现,或者使用自定义的HorizontalScroll再配合ViewPage+Fragment实现。在谷歌推出marginDesign之后,实现这种效果可以直接...

    SkinEngine 3.4.7 安装版

    现在就可以安全的享用SkinEngine这道美餐了,合理的搭配好各个部件的使用,可以很轻松的编出来漂亮得不是一般的程序界面. &lt;br&gt;卸载过程:菜单project-&gt;options-&gt;packages-&gt;在design packages下选择要删除的-〉...

    xkeys-atem-remote:使用XKeys的Blackmagic Design ATEM切换器的可配置远程控制

    一种使用XKeys USB键盘远程控制Blackmagic Design ATEM切换器的方法。 它可以根据您的需要进行配置,并设计为可与同时访问XKey的其他应用程序(例如vMix)配合使用。 应该在支持的任何平台上运行(在macOS和...

    SwipeRefreshLayout、RecyclerView实现上下拉刷新

    material design 自带上下拉刷新控件以及配合RecyclerView实现列表

    Android MVP模式漫画app源码.zip

    Android MVP模式漫画app源码项目基于RxJava Retrofit2 Glide ButterKnife,结合MVP模式开发,使用RxJava配合Retrofit做网络请求,整个项目使用MVP架构,对应model,view,presenter三个包,使用Glide加载图片和缓存...

    Android MVP模式漫画app源码

    Android MVP模式漫画app源码项目基于RxJava+Retrofit2+Glide+ButterKnife,结合MVP模式开发,使用RxJava配合Retrofit做网络请求,整个项目使用MVP架构,对应model,view,presenter三个包,使用Glide加载图片和缓存...

    TabLayout选项卡

    我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在...

    asp.net知识库

    MySQL 和 .Net2.0配合使用 与DotNet数据对象结合的自定义数据对象设计 (二) 数据集合与DataTable 与DotNet数据对象结合的自定义数据对象设计 (一) 数据对象与DataRow ASP.NET中大结果集的分页[翻译] .net 2.0 访问...

    Android中TabLayout结合ViewPager实现页面切换效果

    先看看效果,如图: ...2.下面是TabLayout和ViewPager配合使用的布局 &lt;?xml version=1.0 encoding=utf-8?&gt; &lt;RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:app=htt

    TabLayout使用方法详解

    TabLayout是design库提供的控件,可以方便的使用指示器,功能类似ViewPagerIndicator. 使用非常方便,Android Studio只需要在gradle中引入即可使用 . compile 'com.android.support:design:23.3.0' TabLayout即可以...

    基于MVP-Clean + Weex + RxJava2 + Retrofit + Dagger2 + MTRVA的综合应用

    UI风格采用Material Design,清新、简洁和直观 跨端采用Weex,涉及weex页面、自定义Module、自定义Component、自定义Adapter、与原生webview同步(支持返回键拦截) RxJava的操作符巧妙运用 Dagger2与Butterknife实现...

    手把手实现tablayout随recycleview滚动而滚动(非官方coordinatorlayout实现)

    谷歌新出的Android Design Support Library带来了新的兼容的md风格控件,其中的coordinatorlayout配合appbarlayout再指定behavior可以实现滚动的效果,然而很遗憾,在应用到项目的时候,出现各种问题,然后自己实现...

Global site tag (gtag.js) - Google Analytics