在前不久的谷歌2015 I/O大会上,发布了Android新版本M,在这次的I/O大会上谷歌对Android并没有很大的改变,主要是修改完善之前Android L版本。不过在谷歌推出Material Design设计风格之后,还是做了很多风格上的兼容,比如v7包的 RecyclerView,CardView,Palette等,这次的I/O大会上也继续完善了MD设计支持库,这次谷歌推出了Android Design Support Library 库,全面支持MD设计风格的UI效果。Design Support Library库吸收了8 个新的 material design 组件!最低支持 Android2.1,其实很多组件都是Github上比较火的,只是谷歌把它官方化了,便于开发者使用。今天我们来学习FloatingActionButton,TextInputLayout,Snackbar,TabLayout 四种控件。

使用android.support.design下的类要在build.gradle中配置如下代码
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:recyclerview-v7:22.2.0'
compile 'com.android.support:cardview-v7:22.2.0'
compile 'com.android.support:palette-v7:22.2.0'
compile 'de.hdodenhof:circleimageview:1.3.0'
}
代码如下:
package com.example.administrator.test;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private LinearLayout layout;
private FloatingActionButton button;
private Button button_tableLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
layout = (LinearLayout) findViewById(R.id.layout);
button = (FloatingActionButton) findViewById(R.id.button);
button_tableLayout = (Button) findViewById(R.id.button_tableLayout);
button.setOnClickListener(this);
button_tableLayout.setOnClickListener(this);
}
@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_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.button: //FloatingActionButton and Snackbar
//Snackbar提供了一个介于Toast和AlertDialog之间轻量级控件,它可以很方便的提供消息的提示和动作反馈
Snackbar.make(layout, "Hello,I am Snackbar................................." +
"....................................................................." +
".................osfjalkjlkjflkjxzlkjlk", Snackbar.LENGTH_LONG).setAction(
"取消", new View.OnClickListener() {
@Override
public void onClick(View v) {
}
}
).show();
break;
case R.id.button_tableLayout: //TabLayout
Intent intent = new Intent(this,TabLayoutActivity.class);
startActivity(intent);
break;
}
}
}
Xml布局如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:id="@+id/layout">
<!-- -->
<android.support.design.widget.TextInputLayout
style="@style/textInputlayout"
app:hintTextAppearance="@style/edit_hint">
<EditText
style="@style/edit"
android:hint="用户名"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
style="@style/textInputlayout"
android:layout_marginTop="10dp"
app:hintTextAppearance="@style/edit_hint">
<EditText
style="@style/edit"
android:hint="手机号码"/>
</android.support.design.widget.TextInputLayout>
<!-- -->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_plus"
app:fabSize="mini"
app:backgroundTint="#0000FF"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_plus"
app:fabSize="normal"
app:backgroundTint="#FF0000"/>
<Button
android:id="@+id/button_tableLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TableLayout"/>
</LinearLayout>
Style如下:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 标题栏颜色 -->
<item name="colorPrimary">#FFFFFF</item>
<!--状态栏背景色-->
<item name="colorPrimaryDark">#3A5FCD</item>
<!-- EditText光标和原始边框颜色 -->
<item name="colorAccent">#FF0000</item>
<!-- 整个应用中编辑框字体提示的颜色 -->
<item name="android:textColorHint">#AEAEAE</item>
<!--Activity背景色-->
<item name="android:windowBackground">@android:color/white</item>
</style>
<!-- TextInputLayout布局样式 -->
<style name="textInputlayout">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">55dp</item>
<item name="android:background">@drawable/shape_edit_grey</item>
<item name="android:textSize">16sp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:paddingTop">5dp</item>
</style>
<!-- EditText 布局样式 -->
<style name="edit">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<!--<item name="android:textCursorDrawable">@null</item>-->
<item name="android:background">@null</item>
</style>
有不懂的可以和我交流 QQ:619285112