design support library八大模块
来源:互联网 发布:家庭资产负债表 知乎 编辑:程序博客网 时间:2024/06/05 04:08
引用这个库:在 build.gradle
文件中加上这段代码: compile 'com.android.support:design:22.2.0'
他所涉及的控件有下列:
TextInputLayout;
<?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"> <RelativeLayout android:layout_width="match_parent" android:layout_height="200dp" android:background="#ff9900"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="用户登录" android:textColor="#fff" android:textSize="30sp" /> </RelativeLayout> <android.support.design.widget.TextInputLayout android:id="@+id/tlName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp"> <EditText android:id="@+id/etName" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入用户名" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/tlPassword" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp"> <EditText android:id="@+id/etPassword" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入密码" android:inputType="textPassword"/> </android.support.design.widget.TextInputLayout> <Button android:id="@+id/btn_login" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:text="登录" /></LinearLayout>代码实现如下:
mUserName = (TextInputLayout) findViewById(R.id.tlName); mPassword = (TextInputLayout) findViewById(R.id.tlPassword); etName = (EditText) findViewById(R.id.etName); etPassword = (EditText) findViewById(R.id.etPassword); mUserName.setHint("请输入用户名"); mUserName.setCounterMaxLength(4); mUserName.setCounterEnabled(true); mPassword.setHint("请输入密码"); etName.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { if (s.toString().length() == 4) { mUserName.setCounterEnabled(false); } } }); mButton = (Button) findViewById(R.id.btn_login); mButton.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.btn_login: String name = etName.getText().toString().trim(); String pwd = etPassword.getText().toString(); if (TextUtils.isEmpty(name)){ mUserName.setError("用户名不能为空"); }else{ mUserName.setErrorEnabled(false); } if (TextUtils.isEmpty(pwd)){ mPassword.setError("密码不能为空"); }else{ mPassword.setErrorEnabled(false); } break; } }
FloatingActionButton + Snackbar:
页面显示如下:
<android.support.design.widget.CoordinatorLayout android:id="@+id/layoutRoot" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:src="@drawable/ic_class" app:backgroundTint="#ff87ff" app:borderWidth="0dp" app:fabSize="normal" /> </android.support.design.widget.CoordinatorLayout>代码实现如下:
<pre name="code" class="java">findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(v, "有数据", Snackbar.LENGTH_SHORT) .setAction("取消", new View.OnClickListener() { @Override public void onClick(View v) { } }).show(); } });和toast基本相同
TabLayout:
<android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" android:layout_alignParentBottom="true" app:tabSelectedTextColor="@color/title_red" app:tabTextColor="@color/black"> </android.support.design.widget.TabLayout>配上viewpager 效果更佳哦
tab = (TabLayout) findViewById(R.id.tab); tab.addTab(tab.newTab().setText("tab1")); tab.addTab(tab.newTab().setText("tab2")); tab.addTab(tab.newTab().setText("tab3"));
NavigationView:
他的布局文件需要放在DrawLayout里面,DrawLayout是android5.0提出的抽屉样式,在这调用实现抽屉效果,布局文件如下:
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout android:id="@+id/id_drawer_layout" 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" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/id_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <TextView android:id="@+id/id_tv_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="HelloWorld" android:textSize="30sp"/> </RelativeLayout> <android.support.design.widget.NavigationView android:id="@+id/id_nv_menu" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="left" android:fitsSystemWindows="true" app:headerLayout="@layout/header_just_username" app:menu="@menu/menu_drawer" /></android.support.v4.widget.DrawerLayout>
注意这个view的两个属性
app:headerLayout="@layout/header_just_username"
和app:menu="@menu/menu_drawer"
,分别代表drawer布局中的header和menu item区域。接下来看看作画菜单中头布局header和 配置文件menu:
header
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="192dp" android:background="#ffabcd" android:orientation="vertical" android:padding="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <TextView android:id="@+id/id_link" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="16dp" android:text="http://blog.csdn.net/lmj623565791"/> <TextView android:id="@+id/id_username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/id_link" android:text="Feng Xinzi"/> <ImageView android:layout_width="72dp" android:layout_height="72dp" android:layout_above="@id/id_username" android:layout_marginBottom="16dp" android:src="@drawable/ic_class"/></RelativeLayout>menu 配置文件
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_home" android:checkable="true" //这行代表 确认你的选择项,选中当前项的时候,其他项变成未选中状态 android:icon="@drawable/ic_class" android:title="Home"/> <item android:id="@+id/nav_messages" android:checkable="true" android:icon="@drawable/ic_class" android:title="Messages"/> <item android:id="@+id/nav_friends" android:checkable="true" android:icon="@drawable/ic_class" android:title="Friends"/> <item android:id="@+id/nav_discussion" android:checkable="true" android:icon="@drawable/ic_class" android:title="Discussion"/> </group> <item android:title="Sub items"> <menu> <item android:checkable="true" android:icon="@drawable/ic_class" android:title="Sub item 1"/> <item android:checkable="true" android:icon="@drawable/ic_class" android:title="Sub item 2"/> </menu> </item></menu>
最后是activity
package com.example.myapplication;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.ActionBarActivity;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;/** * 作者: dyq * 日期: 2016/5/3. * 邮箱:twinkler_qian@163.com */public class Navigation extends AppCompatActivity { private DrawerLayout mDrawerLayout; private NavigationView mNavigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.navigation); mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout); mNavigationView = (NavigationView) findViewById(R.id.id_nv_menu); Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar); setSupportActionBar(toolbar); final ActionBar ab = getSupportActionBar(); ab.setHomeAsUpIndicator(R.drawable.ic_class); ab.setDisplayHomeAsUpEnabled(true); setupDrawerContent(mNavigationView); } private void setupDrawerContent(NavigationView navigationView) { navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { menuItem.setChecked(true); mDrawerLayout.closeDrawers(); return true; } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_drawer, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if(item.getItemId() == android.R.id.home) { mDrawerLayout.openDrawer(GravityCompat.START); return true ; } return super.onOptionsItemSelected(item); }}
coordinatorLayout + AppbarLayout + collapsingToolbarLayout
coordinatorlayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View。
coordinatorLayout + AppbarLayout实现了 Toolbar隐藏,通过AppBarLayout的子视图的属性控制。观察AppBarLayout的子布局,
Toolbar有app:layout_scrollFlags属性,这就是控制滑动时视图效果的属性。app:layout_scrollFlags有四个值:
- scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部。
- enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
- enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
- exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
为了ToolBar可以滚动,CoordinatorLayout里面,放一个带有可滚动的View.如上的例子,放的是ViewPager,而ViewPager里面是放了ListView的,即是可以滚动的View。CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如,示例中Viewpager设置了此属性。
app:layout_behavior="@string/appbar_scrolling_view_behavior"为了使得Toolbar有滑动效果,必须做到如下三点:
1. CoordinatorLayout作为布局的父布局容器。 2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。 3. 给滑动的组件设置app:layout_behavior属性
CollapsingToolbarLayout可实现Toolbar的折叠效果。
CollapsingToolbarLayout 提供以下属性和方法是用:
1. Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。还没研究明白,不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0],值越大视察越大。
5. CollapseMode :子视图的折叠模式,在子视图设置,有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。
CoordinatorLayout 还提供了一个 layout_anchor 的属性,连同 layout_anchorGravity 一起,可以用来放置与其他视图关联在一起的悬浮视图(如 FloatingActionButton)。本例中使用FloatingActionButton。
通过下面的参数设置了FloatingActionButton的位置,两个属性共同作用使得FAB 浮动按钮也能折叠消失,展现。
app:layout_anchor="@id/appbar"app:layout_anchorGravity="bottom|right|end"
使用CollapsingToolbarLayout实现折叠效果,需要注意3点 1. AppBarLayout的高度固定 2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性 3. 关联悬浮视图设置app:layout_anchor,app:layout_anchorGravity属性
自定义behavior待研究。。。
附加各个模块的源码,在androidManifest里把每个activity逐个作为主activity,查看效果,地址如下:
http://download.csdn.net/detail/aaaaaa3334/9511196
- design support library八大模块
- Android Design Support Library
- Android Design Support Library
- Android Design Support Library
- Design Support Library
- Design Support Library详解
- Design Support Library---->NavigationView
- Design Support Library相关
- Android Design Support Library
- Design Support Library介绍
- Design Support library简介
- Design Support Library
- Android Design Support Library
- android Design Support Library
- Android Design Support Library
- Android Design Support Library
- Android Design Support Library
- Android Design Support Library学习
- 前端学习(六)
- node js 学习笔记(一) 常用模块介绍
- Hive的学习笔记1-hive的安装和mysql的连接
- mysql创建用户两次授权
- 关于iframe中datagrid的高度自适应
- design support library八大模块
- iOS开发网络篇—HTTP协议
- Easyui Datagrid自动调整行号大小
- 使用Retrofit2 RxJava 文件上传
- c++ std::bind用法小结。
- in a frame because it set 'X-Frame-Options' to 'DENY'.
- 使用模板快速编写测试用例
- Android快速开发系列 10个常用工具类
- Maven