资讯专栏INFORMATION COLUMN

Android Design Library之一

felix0913 / 1357人阅读

摘要:妈妈再也不用担心我个人设计丑了。实现一种更优雅的轻量级提示功能。在同一时间,只能有一个在界面上显示。表示指示器的高度有两个值表示当多了之后可以滚动。宽度固定当数量为个时会显示成而为会显示成详细的方法属性等请看官方文档其他部分代码

http://blog.magicer.xyz/2017/...

使用Design包后,瞬间感觉自己APP逼格高了呢。妈妈再也不用担心我个人APP设计丑了。

Snackbar

Snackbar可以很方便的替换Toast。实现一种更优雅的轻量级提示功能。而且还可以设置Action。在同一时间,只能有一个Snackbar在界面上显示。下面来看下怎么使用:

 Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_SHORT).show();

简单的一行代码,跟Toast一样。我们还可以通过设置Action来实现轻量级的交互。

 Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_SHORT)
                .setAction("ok", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //点击事件
            }
        }).show();

不过这个时候,可能你会发现,Snackbar出现的时间太短了,可能来不及点。没有关系。只需要将Snackbar.LENGTH_SHORT换成Snackbar.LENGTH_INDEFINITE
有时候我们需要跟APP设计风格匹配更换其他背景颜色。这个时候也很简单。

        Snackbar snackbar = Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_INDEFINITE)
                .setAction("ok", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        //点击事件
                    }
                });
        //更改Snackbar背景颜色
        snackbar.getView().setBackgroundColor(Color.parseColor("#009688"));
        //设置Action文字的颜色
        snackbar.setActionTextColor(Color.parseColor("#9E9E9E"));
        snackbar.show();
TextInputLayout

TextInputLayout做为EditText的父容器使用,当用户输入内容的时候,hint会移动到上方。
使用方法很简单。看下代码。



        
    

    

        
    
 
    
mEtUsername.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) {
                if (s.length() <5){
                    mTilUsername.setError("最少5个字符");
                    mTilUsername.setErrorEnabled(true);
                }else {
                    mTilUsername.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
FloatingActionButton

来看下FloatingActionButton的集成关系

在来个简单使用的例子

好了。这货就说这些吧。没什么好些的。详细的方法讲解就看文档呗,没啥好说的。

TabLayout

在使用TabLayout的时候,很多时候都是跟ViewPager结合使用。看下结合后的简单例子。

其实实现这种效果也很简单,用不几行代码就搞定了。
看下布局文件




    

    

其中TabLayout的几个属性的意思为:

tabGravity:有两个值:fill表示tab充满屏幕,每个tab均分宽度,center表示根据默认的宽度,tab显示在屏幕中间
例如这样

tabIndicatorColor:表示tab底部的指示器的颜色。

tabIndicatorHeight: 表示指示器的高度

tabMode: 有两个值:scrollable表示当tab多了之后可以滚动。fixed宽度固定
当数量为9个时fixed会显示成 而为scrollable会显示成

详细的方法属性等请看TabLayout官方文档

其他部分代码

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        ButterKnife.bind(this);
        init();
        mAdapter = new ImagePageAdapter(mViews);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

    }

    private void init() {
        mViews = new ArrayList<>();
        LayoutInflater inflater = LayoutInflater.from(this);
        for (int i = 0; i < 9; i++) {
            ImageView view = (ImageView) inflater.inflate(R.layout.item_tab, null);
            view.setImageResource(R.mipmap.ic_launcher);
            mViews.add(view);
        }
    }
public class ImagePageAdapter extends PagerAdapter {

    private List mViews;

    public ImagePageAdapter(@NonNull List views) {
        mViews = views;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViews.get(position));
        return mViews.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViews.get(position));
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "TAB"+position;
    }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/13599.html

相关文章

  • Material Design - 收藏集 - 掘金

    摘要:与老前辈使用攻略刷新篇掘金小序继使用攻略助力篇之后,一直没有更新上下拉刷新的功能实现,主要还是受限于个人现有的技术实力,总觉得没有经过实际打磨的,就不敢有上场的自信。 DrawerLayout 和 NavigationView 使用详解 - Android - 掘金Android Material Design Library 推出了很长时间,越来越多的APP使用了符合Library ...

    stormzhang 评论0 收藏0
  • 最全面的 Material Design 学习资料

    摘要:是以后的主流设计风格,现在已经越来越多的遵循的设计规范来进行开发,是每个开发者必学的基础技术。 本人目前正在找工作,想了解我的详细情况请移步到我的 网页版简历 ,希望能得到各位的推荐,谢谢! 关于 Material Design 在这里我就不在多做介绍了,想必做Android开发的 都听过它的大名 ,甚至用过无数次了。Material Design 是以后 Android 的主流设计风...

    yagami 评论0 收藏0
  • MaterialDesign相关 - 收藏集 - 掘金

    摘要:将为按钮与操作行为转换提供一些默认动画,而及更高版本可让您定制这实现炫酷的登录效果掘金有需要的,请直接下载源码。本文就通过一个具体的例掘金此项目基于开发的一个。 Material Design 学习资料收集 - Android - 掘金本人目前正在找工作,想了解我的详细情况请移步到我的 网页版简历 ,希望能得到各位的推荐,谢谢! 关于 Material Design 在这里我就不......

    flyer_dev 评论0 收藏0
  • android design library提供的TabLayout的用法

    摘要:现在我们可以使用库的去实现了。创建其中的布局为的适配器设置这里提几点我遇到的问题开始我设置的是运行后,三个标签挤到一块去了。这个有两个属性值不做过多的解释,适合很多的情况。需要注意的是方法是最新的才有的。 在开发中,我们常常需要ViewPager结合Fragment一起使用,如下图:showImg(https://segmentfault.com/img/bVoQIu); 我们可以使用...

    icyfire 评论0 收藏0
  • [译] Plaid 应用迁移到 AndroidX 的实践经历

    摘要:它是对的重大改进和全面替代方案。一个更直接的方法是开始迁移,并且检查可能出现的报错。迁移工具位于菜单栏的选项。这个选项将迁移整个项目的所有模块。中的迁移工具是迁移的主要方式。迁移应用变更最少的代码以保证应用可以仍能正常运行。 原文地址:Cross-stitching Plaid and AndroidX 原文作者:Tiem Song 译文出自:掘金翻译计划 本文永久链接:github.co...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

felix0913

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<