高逼格UI-ASD(Android Support Design)-Android-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝26
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:133回复:0

  高逼格UI-ASD(Android Support Design)

楼主#
更多 发布于:2016-05-22 14:53



本年的Google IO给咱们android开发着带来了三样很屌很屌的library:
ASD(Android Support Design)
APL(Android Percent Layout)
DBL(Data Binding Library)
这三个库都是很屌很屌的库,第一个能够让咱们在低版本的Android上运用Material
Design,第二个是为了十分好的适配,供给了根据百分比的Layout;至于第三个,能让Activity十分好担任MVC中C的责任,让咱们开发者更少的去findViewById。
ok,首要咱们来看看第一个库,或许也是最主要的库-ASD。
ASD简介
前面说了,ASD给咱们供给了Material
Design供给了向下的兼容,当然咱们也需求学习几个控件的运用,最终用一个实例的方式归纳一个需求学习的这几个控件。
怎样运用ASD?很简略,在AS中增加以下一句话就ok啦。
compile ‘com.android.support:design:22.2.0’
当然,咱们在咱们学习一些控件的时分还需求AppCompat Library。所以:
compile
‘com.android.support:appcompat-v7:22.2.0’
Snackbar
Snackbar我以为他是一个介于Dialog和Toast之前的玩意,能够在作为一种用户挑选提示时运用。Snackbar的运用很简略,接下来咱们以代码和作用的方式迅速预览一下这玩意的运用。
public void click(View view) {      
 Snackbar.make(view, "真要点我?", Snackbar.LENGTH_LONG)              
 .setAction("真的!", new View.OnClickListener() {                    @Override    
               public void onClick(View v) {                      
 Toast.makeText(MainActivity.this, "你真点我了!",                              
 Toast.LENGTH_SHORT).show();                    }                }).show();  
 }
来看看作用。

好吧,这玩意真的很简略,对照着上面的代码这下面的作用,必定秒懂的。
FloatingActionButton
在看看看另一个小控件,或许在项目中咱们需求一个圆形的Button,
你或许会想到用自界说Shape的方式去做,但那样文本的显现欠好居中,这时估量就想到用自界说控件去处理了。好吧,如今ASD给咱们供给了FloatingActionButton能够轻松的创建圆形Button,而且更牛x的是FloatingActionButton具有更艳丽的作用。
FloatingActionButton的运用也很简略,他直接承继ImageView,所以ImageView的一切特点都能够用在FloatingActionButton上。来,看看咱们的demo:

简略解说一下命名空间为app的装备项。
1. app:backgroundTint是指定默许的布景色彩
2. app:rippleColor是指定点击时的布景色彩
3. app:borderWidth border的宽度
4.
app:fabSize是指FloatingActionButton的巨细,可选normal|mini
5. app:elevation 能够看出该空间有一个海拔的高度
6. app:pressedTranslationZ 哈,按下去时的z轴的便宜
来看看FloatingActionButton的作用:

恩,不错,但是有一个显着的缺点即是FloatingActionButton和Snackbar的合作不太好,这对于Material
Design简直即是羞耻!
想要处理这个疑问,咱们需求引进另一个控件。
CoordinatorLayout
CoordinatorLayout这个控件的作用是让它的子view十分好的去协作,在接下来的时间里,咱们根本都会用到这个控件,这儿咱们仅仅简略的用CoordinatorLayout来包裹一下FloatingActionButton来抵达和Snackbar十分好协作的作用。修正咱们的规划:

此刻的作用:

能够看到,当Snackbar显现的时分,Button主动往上移动了,而当Snackbar不见今后,Button又回到了本来的方位。
TabLayout
TabLayout也是一个好东西,有了它咱们再也不需求运用麻烦人的PagerTabStrip了,也不需求运用自界说view的方式来抵达作用。首要来看看简略用法。

仍是只解说app命名空间的。
1. app:tabIndicatorColor tab的指示符色彩
2. app:tabSelectedTextColor 挑选tab的文本色彩
3. app:tabTextColor 普通tab字体色彩
4. app:tabMode 模式,可选fixed和scrollable
fixed是指固定个数,scrollable是能够横行翻滚的(逼格高)
5. app:tabGravity 对齐方式,可选fill和center
在来看看activity的代码:
final TabLayout tabLayout = (TabLayout)
findViewById(R.id.tl);        for(int i=0;i<20;i++)
tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));      
 tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {    
       @Override            public void onTabSelected(TabLayout.Tab tab) {      
         Toast.makeText(MainActivity.this, tab.getText(),
Toast.LENGTH_SHORT).show();            }            @Override            public
void onTabUnselected(TabLayout.Tab tab) {            }            @Override    
       public void onTabReselected(TabLayout.Tab tab) {            }      
 });
首要,获取该控件,然后一个for循环增加20个tab,运用:
tabLayout.addTab(tabLayout.newTab().setText(“TAB”));
增加新的tab。然后通过setOnTabSelectedListener来设置tab的item点击事情。so
easy。 来看看作用。

AppBarLayout
AppBarLayout这个控件也是让子view一起协作的,它和CoordinatorLayout的差异在于:
AppBarLayout是在作用上的协作,用AppBarLayout包裹的子view会以一个全体的方式作为AppBar。
CoordinatorLayout是在做法上的一种协作,尤其是在翻滚的协作上,能够说十分完美(额,
也不是那么完美)
首要来看一下咱们要做的作用吧。

从作用图上看,Toolbar和TabLayout成为了一体。
再来看看咱们的代码

仅仅是用AppBarLayout包裹了一下Toolbar和TabLayout。仔细的兄弟或许看到了咱们的TabLayout的布景也变了色彩,这儿是因为咱们在theme中设置了:


<item name=”colorPrimary”>#FF00FF00</item>




那上面那个白色布景的呢?
好丑陋!难道没有设置吗?本来我也设置了,但是没有表现到TabLayout上,从这儿也验证了咱们上面所说的:

AppBarLayout是在作用上的一种协作



既然咱们验证了该假定,那么趁便来验证一下

CoordinatorLayout是在做法上的一种协作



的假定吧。 修正代码:

比照上面的代码,首要咱们增加了app的命名空间,为何要增加这个?因为咱们下面要用到!(靠!啥答复)
而且,咱们给Toolbar增加了一条装备:
app:layout_scrollFlags="scroll|enterAlways"
表明这个控件是能够滚出屏幕的,而且是随时能够再显现
layout_scrollFlags的别的取值有:
1. scroll 谁要滚出屏幕,谁就设置这个值
2. enterAlways 别的向上滑动时,能够当即显现出来
3. exitUntilCollapsed 将封闭翻滚直到它被折叠起来(有 minHeight)
而且一向保持这么
4. enterAlwaysCollapsed 界说了 View 是怎样回到屏幕的,当你的 view
现已声明晰一个最小高度(minHeight) 而且你运用了这个象征,你的 View 只要在回到这个最小的高度的时分才会打开,只要当 view
现已抵达顶部以后它才会从头打开悉数高度。
(以上解说,参阅了别的文章[目测也是翻译的官方文档])
在CoordinatorLayout中咱们还引进了别的一个新的控件:
NestedScrollView,这个view本来是ScrollView的增强版,增强在哪呢?他支撑特点:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
这条句子的作用是标识他要一起来写作完成scroll的作用。换句话说,上面的滚出屏幕的作用要合作一个能够翻滚的View,而且得设置了该特点后才能够。(最少你得通知人家,谁要滚出去,滑动谁时才滚出去吧)
好吧,来看看此刻的作用:

看到了吧,咱们在滑动下面的时分,Toolbar自觉的滚出了屏幕,而且在往上滑动的时分,Toolbar立马呈现了,这即是enterAlways的劳绩。
CollapsingToolbarLayout
最终,咱们来看一个逼格相同高的控件:CollapsingToolbarLayout。
该控件的的子view有必要要有Toolbar,他的作用即是供给一个可折叠的标题栏。通常情况下,该控件会和上面咱们说的一些控件调配运用,抵达一种固定的作用
CollapsingToolbarLayout自身的运用很简略,仅仅他的子view需求设置很多特点来抵达这种作用,下面,咱们就供给一个demo实例,来学习一下CollapsingToolbarLayout的运用,趁便复习一下上面所学到的一些控件。咱们来完成一个这么的UI:

首要来剖析一下,最直观的,能够看到有一个做法上的协作,
那必定需求CoordinatorLayout这个控件,而且还会有一个作用上的协作,那必定是AppBarLayout啦,当然,仔细的兄弟或许还会看出来,那个图像和Toolbar会有一种视差的作用,而且全部banner有些是一种折叠的作用,这就需求CollapsingToolbarLayout这个控件了。
来说一下CoolapsingToolbarLayout,这个控件有必要要有一个Toolbar的子view,而且它将作为AppBarLayout的仅有向接子view运用,它供给了一个能够折叠的AppBar,而且还供给一种视差的作用。下面就让咱们从比如中感触CoolapsingToolbarLayout的运用。

剖析一下这个规划,最外层一个RelativeLayout他包含了两个CoordinatorLayout,
第二个CoordinatorLayout比较简略即是包含了一个FloatingActionButton,这么的用法能够参阅博客上面讲的。
咱们的重点是放在第一个CoordinatorLayout上。它有两个直接子view,和咱们说的相同,一个供给滚出作用,一个供给翻滚的作用。接下来一个AppBarLayout将ImageView和Toolbar作为了AppBar。但是它不是直接包含了这两个小控件,而是通过CollapsingToolbarLayout,而且表明翻滚标识的app:layout_scrollFlags="scroll|exitUntilCollapsed"也是赋值给了CollapsingToolbarLayout,在这儿考虑一下,这么全部CoolapsingToolbarLayout将会作为一个全体滚出界面。但是看作用并不是啊,Toolbar分明还在那,那么接下来,咱们来调查一下这个ImageView和Toolbar有啥神奇之处:

ImageView有一条特点app:layout_collapseMode="parallax"表明这个ImageView以视差的方式折叠(作用上看着形似即是有点小偏移)。
Toolbar的app:layout_collapseMode="pin"表明Toolbar在折叠的进程中会停靠顶部(pin的意思是钉住)。
最终咱们运用了一个RecyclerView,而且给这个控件设置app:layout_behavior="@string/appbar_scrolling_view_behavior",至于RecyclerView假如你不会用,请自行网补。
持续…,
持续调查上面的作用,在滑动的进程中有一个蛋疼的色彩–绿色,它是一个从无到有的进程,是一个渐变的作用,它是怎样操控的呢?
来看看CollapsingToolbarLayout它有一条特点是:app:contentScrim="?attr/colorPrimary",设置这条特点,在滑动的进程中,会主动改变到该色彩。
最终,要注意一下,如今咱们不能给Toolbar设置标题了,而是给CollapsingToolbarLayout设置标题,能够看到标题在翻滚的进程中会有一个巨细的改变。
如今这个作用的逼格现已很高了,但是咱们还不满意,那个绿色太TMD的丑陋了,
哎?能不能跟从那个图像的色彩?这么看起来逼格是不是更高!!
哈哈,完全能够!这需求咱们再引用另一个库Palette,关于Palette的运用,能够看我之前的博客:《Android5.0之Palette简略有用》。
咱们在activity中这么运用:
final CollapsingToolbarLayout ctl =
(CollapsingToolbarLayout) findViewById(R.id.ctl);        ctl.setTitle("Cool
UI");...Bitmap bmp = BitmapFactory.decodeResource(getResources(),
R.drawable.banner);        Palette.generateAsync(bmp, new
Palette.PaletteAsyncListener() {            @Override            public void
onGenerated(Palette palette) {                Palette.Swatch swatch =
palette.getDarkMutedSwatch();              
 ctl.setContentScrimColor(swatch.getRgb());            }        });
来看看此刻的作用:

CollapsingToolbarLayout的ContentScrim是咱们从那个Bitmap上取的。好了,就这么多吧,累尿了,休息去了。








优质IT资源分享社区为你提供此文。
站有大量优质android教程视频,资料等资源,包含android基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

android教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客