手把手教你掌握Design新控件

对于Material Design 控件已经不是新鲜的控件了。

早在2015年,谷歌在推出Android5.0的同时推出了全新的设计Material Design,谷歌为了给我们提供更加规范的MD设计风格的控件,推出了Design支持包,Design常用的控件有下面8个:

  • TextInputLayout 文本输入布局
  • Snackbar
  • TabLayout 选项卡布局
  • FloatingActionButton 浮动按钮
  • NavigationView 导航视图
  • AppBarLayout 应用程序栏布局
  • CoordinatorLayout 协作布局
  • CollapsingToolbarLayout 折叠工具栏布局

下面我们逐个来看看

首先我们要在build文件中引入support:design

dependencies {    
compile fileTree(dir: 'libs', include: ['*.jar'])    
testCompile 'junit:junit:4.12'    
compile 'com.android.support:design:24.0.0'    
compile 'com.android.support:appcompat-v7:24.0.0'    
compile 'com.android.support:support-v4:24.0.0'
}

1、 TextInputLayout 文本输入布局


TextInputLayout把EditText的android:hint属性的值以浮动标签的形式显示出来,通过setErrorEnabled(boolean)setError(CharSequence)来显示提示信息。
效果图:
TextInputLayout

<android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入手机号码"
            android:inputType="number"
            android:maxLength="11" />
    </android.support.design.widget.TextInputLayout>

java代码提示信息

TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.text_input_layout);
        textInputLayout.setErrorEnabled(true);
        textInputLayout.setError("手机号码格式有误");

2、 Snackbar


Snackbar反馈操作,注意Snackbar显示或者消失的时候有一个回调方法。

Snackbar snackbar=Snackbar.make(tab_layout,"snackbar",Snackbar.LENGTH_LONG);
        //回调方法
        snackbar.setCallback(new Snackbar.Callback() {
            @Override
            public void onDismissed(Snackbar snackbar, int event) {
                super.onDismissed(snackbar, event);
            }
            @Override
            public void onShown(Snackbar snackbar) {
                super.onShown(snackbar);
            }
        });
        snackbar.show();

3、TabLayout 选项卡布局


一般情况下,它总是喜欢和ViewPager成对出现,他们如同情侣般,恩恩爱爱,走到那都是卿卿我我的

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  • tablayout.setupWithViewPager();
    使用这种方法标题由ViewPager决定
  • viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tablayout));
    使用这种方法标题由Tablayout决定

下面我们用TabLayout和ViewPager来实现选项卡的切换

先看效果图:

选项卡TabLayout.MODE_FIXED
选项卡TabLayout.MODE_SCROLLABLE

新建HomeActivity
public class HomeActivity extends FragmentActivity {

    private TitleFragmentPagerAdapter pagerAdapter;

    private ViewPager viewPager;

    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        pagerAdapter = new TitleFragmentPagerAdapter(getSupportFragmentManager(), this);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setAdapter(pagerAdapter);
        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }
}

这里需要注意一下,setupWithViewPager必须在ViewPager.setAdapter()之后调用,查看源码

public void setupWithViewPager(ViewPager viewPager) {
    PagerAdapter adapter = viewPager.getAdapter();
    if(adapter == null) {
        throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
    } else {
        ...
    }
}

你会发现,如果适配器为空,则直接抛出异常了。
这里我们用

tablayout.setupWithViewPager();

如前面提到的使用这种方法标题由ViewPager决定

新建 ListFragment
public class ListFragment extends Fragment {

    public static final String TYPE = "TYPE";
    private String mType;

    public static ListFragment newInstance(String type) {
        Bundle args = new Bundle();
        args.putString(TYPE, type);
        ListFragment listFragment = new ListFragment();
        listFragment.setArguments(args);
        return listFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mType = getArguments().getString(TYPE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_list, container, false);
        TextView textView = (TextView) view;
        textView.setText(mType);
        return view;
    }

}
新建fragment_list布局
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" />

如果想改标题颜色和选中后的颜色,我们可以通过tabSelectedTextColor和tabTextColor相关属性调整。

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

color
这样一个选项卡滑动已经轻松的搞定了,是不是感觉很爽,代码实现如此简单。

4、 FloatingActionButton浮动按钮

FloatingActionButton通常是一个漂浮的小圆圈,它有动态效果,比如变形、弹出、位移等。FloatingActionButton默认的背景颜色是主题的colorAccent,还可以通过app:backgroundTint来修改,也可以通过android:backgroundTint属性修改,但是android:backgroundTint属性只能在API21及以上使用。

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add_task"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        app:backgroundTint="@color/colorAccent"
        app:fabSize="normal" />

好了,今天就先写到这。其他四个使用会在下一篇再做分析。
公众号二维码

坚持原创作者简介:洪生鹏。一个文学爱好者,个人公众号:爱开发(aikaifa)。开发小助手,长期不断推送优选博文、优秀开源项目。热衷旅行、写作,过着白天到工地搬砖、晚上写故事的生活。

无觅关联推荐,快速提升流量
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。