首页 > 代码库 > Design库,所有控件的使用

Design库,所有控件的使用

导入地址com.android.support:design:23.2.0。技术分享。输入design搜索到确认就可以。
布局中android.support.design.widget.XXX,调用控件
控件一:FloatingActionButton-浮动的圆形button
属性:布局中加入xmlns:app”
http://schemas.android.com/apk/res-auto
app:backgroundTint=”#ff0000”//设置背景色
app:fabSize=”normal”//包裹src图片,属性mini缩小控件达到src的大小
app:elevation=”5dp”//x轴阴影效果
app:rippleColor=”#000000”//点击效果颜色
控件二:TextInputLayout-优化EditText
属性:必须存放子控件:EditText
代码:textinput.setHint(“这里填写提示信息”);
EditText edittext=textinput.getEditText();
edittext.addTextChangedListener(new TextWatcher(){
方法:beforeTextChanged:
方法:onTextChanged:
if(s.length()>10){
textInput.setError(“username不能超过10位”);//限制10个字节
textInput.setErrorEnabled(true);
}else{
textInput.setErrorEnabled(false);
}
方法:afterTextChanged:
});
控件三:Snackbar- 可交互的提示框(相当于Toast位于bottom)
代码:在控件的点击事件中调用
final Snackbar snackbar=Snackbar.make(btn,”你点击了button”。Snackbar.LENGTH_LONG).show();
snackbar.setAction(“知道了”。new View.OnClickListener(){
snackbar.dismiss();
}
});
控件四:TabLayout 便捷标签
属性:app:tabTextColor=”@android:color/black”//未选中字体颜色
        app:tabSelectedTextColor=”@android:color/XXX”//选中字体的颜色
        app:tabIndicatorColor=”“//下标指示器的颜色(滑标)
        app:tabIndicatorHeight=”“//下标指示器的高度
        app:tabMode=”scrollable”//可滑动标签
        //背景色直接bg就能够
代码: 获取tabs控件
         tabs.addTab(tabs.newTab().setText(“Tab1”));//加入标签名称
          加入viewpager一起使用:加入viewpager到布局。
          Listtitles=new ArrayList<>();
          Listfragments=new ArrayList<>();
          for(int i=0;i<4;i++){
                 String title=”Tab”+(i+1);
                 tabs.addTab(tabs.newTab().setText(title));
                 titles.add(title);
                 Fragment fragment=new JikeFragment(title);
                 fragments.add(fragment);
          }
          获取viewpager控件
          XXXFragmentAdapter mAdapter=new XXXFragmentAdapter(getSupportFragmentManager(), fragments, titles);
          viewpager.setAdapter(mAdapter);
          tabs.setupWithViewPager(viewpager);
          tabs.setTabsFromPagerAdapter(mAdapter);
          
创建XXXfragment,在xxxfragment中加入构造函数:
String mTitle;
          public xxxfragment(String title){
             mTitle=title;
          }
          在onCreateView中:
          text=setText(mTitle);
          
创建XXXFragmentAdapter
          public class XXXFragmentAdapter extends  FragmentStatePagerAdapter {

private List<Fragment> mFragments;
private List<String> mTitles;

public EventTabFragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
    super(fm);
    mFragments = fragments;
    mTitles = titles;
}

@Override
public Fragment getItem(int position) {
    return mFragments.get(position);
}

@Override
public int getCount() {
    return mFragments.size();
}

@Override

public CharSequence getPageTitle(int position) {
return mTitles.get(position);

}

}  

控件五: NavigationView-側滑视图
属性:布局中加入xmlns:app”http://schemas.android.com/apk/res-auto
          创建布局xxxlayout.xml
          布局中创建android.support.v4.widget.DrawerLayout控件
          控件中创建NavigationView
          app:headerLayout="@layout/head_view"//创建head_view布局(头部布局)
          app:menu="@menu/ment_main"(菜单布局)
          android:layout_gravity="left"
          android:fitsSystemWindows="true"
代码:获取drawerLayout控件
          drawerLayout.closeDrawer();//控制側滑菜单的显示opean与隐藏close
控件六:CoordinatorLayout-完美协调子View工作的核心部件
1.属性:根布局CoordinatorLayout
           使用FloatingActionButton控件
           使用Snackbar控件
1.效果:随着Snackbar的弹出FloatingActionButton不被覆盖,随着Snackbar向上移动。
2.属性:控件android.support.design.widget.CoordinatorLayout//相当于优化的FrameLayout
                 app:contentScrim="#77DB93"//动画结束后显示toolbar //二
                 控件 android.support.design.widget.AppBarLayout //用于兼容Tb与CL
              android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar//设置字体颜色为白色//二
                     控件android.support.design.widget.CollapsingToolbarLayout//用于滑动缩小整个上边布局

                     app:expandedTitleMarginStart="80dp"//设置边距
                         控件ImageView //第二部分
                 app:layout_collapseMode="parallax"//终于显示图片中间位置
                 //參数none,终于显示图片底部
                 //參数bin,依然显示在图片底部无效果
                 app:layout_collapseParallaxMultiplier="0.8"//调节视觉差,值越小动态效果越快
                         控件android.support.v7.widget.Toolbar
              android:layout_height="?attr/actionBarSize"//系统默认高度
              app:layout_scrollFlags="scroll|enterAlways"//上滑隐藏Toolbar/下滑显示Toolbar//二、挪到CTL中
              //參数enterAlwaysCollapsed仅仅有下滑到第一个控件的时候再显示
              //參数exitUntilCollapsed配合android:minHeight使用,上滑动隐藏余留一个最小高度,不写最小高度为默认高度
              app:popupTheme="@style/ThemeOverlay.AppCompat.Light"//设置背景色为白色(没有作用)
              app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"//去除系统默认title
              (内部内容
               <item name="android:windowActionBar">false</item>
               <item name="android:windowNoTitle">true</item>
               <item name="windowActionBar">false</item>
               <item name="windowNoTitle">true</item>
              ) 
              //第二部分
              app:layout_collapseMode="pin"//固定toolbar不隐藏
              //參数parallax随着图片缩小Toolbar也随着隐藏,同一时候进行
              //參数none相当于没加这个属性。效果是Toolbar隐藏掉后再缩小图片
                 控件android.support.v4.widget.NestedScrollView
           app:layout_behavior="@string/appbar_scrolling_view_behavior"//设置NS位于ABL的下方
2.代码:
Toolbar toolbar;
CollapsingToolbarLayout collapsingtoolbarlayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    toolbar=(Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);//设置标题栏默认内容。大概意思是设置到activity窗体中
    collapsingtoolbarlayout= (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout);
    collapsingtoolbarlayout.setTitle("美好的一天");
    getSupportActionBar().setHomeButtonEnabled(true);//是否使用左上角的返回button
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示返回button,是否实现返回到上一页的效果未測

}

控件六源代码

Design库,所有控件的使用