1.回顾
上篇对已经做的乐逗项目进行了一些优化,但是正要排版的时候,想到,传统的App界面十分难看;看着自己手机里绚丽的app界面,又想到自己写的app界面超级难看,就查询了有关资料;找到了Android Design Support Library 的一些特殊效果,十分漂亮,也就是昨天 经常出错的内容;今天饶有兴趣的学习了些感兴趣的内容.
2.大纲
- FlotingActionButton
- TextInputLayout
- SnackBar
- TabLayout
- NavigationView
- CoordinatorLayout
- AppBarLayout
- CollapsingToolbarLayout
- Toolbar
- NestedScrollView
3.Translucent实现
我这里叫做 合并状态栏, 也有叫做 侵入状态栏的;
开发环境:Android Studio 1.3
注意: 这个效果在Android 4.4 及其以上才有效果的;
实现步揍:
- 第一步: 加载Design Support Library
后面不在重复,一定要引入兼容包;
compile 'com.android.support:design:22.2.0'
compile 'com.android.support:appcompat-v7:22.2.0'
- 第二步: 在style.xml 中配置
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!--全屏设置使得,跨越状态栏-->
<item name="android:windowTranslucentStatus">true</item>
</style>
当然也可以使用这句话:
<item name="android:windowTranslucentNavigation">true</item>
- 第三步: 在AndroidMainFest.xml 中使用即可
android:theme="@style/AppTheme"
效果图 1 :
4.FlotingActionButton 实现
如上图所示的紫色浮动按钮所示;
小憩:有什么错误,请指出;
实现步揍 :
第一步: 在 布局 根节点加入
为了使用 app: 开头的布局控制; 通常的为android:开头的
xmlns:app="http://schemas.android.com/apk/res-auto"
第二步 : 布局文件实现
使用的是 android.support.design 下的兼容控件
<android.support.design.widget.FloatingActionButton
android:id="@+id/btn_floating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo"
app:elevation="10dp" />
第三步: 使用
其实就是一个按钮,和button的使用方法一样
final FloatingActionButton btn_floating = (FloatingActionButton) findViewById(R.id.btn_floating);
btn_floating.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//这里实现代码
}
});
5.SnackBar 实现
SnackBar实现 十分简单,类似与Toast ,但比Toast强大;
- 带点击按钮和事件的SnackBar
//添加一个按钮
snackbar.setAction("点击访问", new View.OnClickListener() {
@Override
public void onClick(View v) {
snackbar.dismiss();
}
});
snackbar.show();
- 一般的SnackBar
Snackbar.make(float_btn, "你还好吗?", Snackbar.LENGTH_SHORT)
.show();
6.TextInputLayout 实现
TextInputLayout 是editText的升级版, 提供了非常好的视觉效果和提示;
实现步揍 :
第一步: 布局实现
<android.support.design.widget.TextInputLayout
android:id="@+id/tv_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/fu_color"/>
</android.support.design.widget.TextInputLayout>
第二步 : 监听实现
这里实现 基本和edittext 一样,但是提供的效果不一样
/**
* TextInputLayout使用
*/
final TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.tv_layout);
textInputLayout.setHint("请输入你的姓名:");
EditText editText = textInputLayout.getEditText();
editText.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() > 10) {
textInputLayout.setError("姓名长度太长了");
textInputLayout.setErrorEnabled(true);
} else {
textInputLayout.setErrorEnabled(false);
}
}
@Override
public void afterTextChanged(Editable s) {
}
});
效果图 2 :
7.TabLayout 实现 tab
tablayout 实现 后就是几个tab, 后绑定 viewpager后 ,才显得好看;
实现步揍 :
第一步 : 布局实现
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="labelnet.cn.ledou.TestActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.v4.view.ViewPager
android:id="@+id/vp_test"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
第二步 : 实现 viewpager
这里就不实现Fragment了,自己新建个试试;
TabLayout tabs= (TabLayout) findViewById(R.id.tabs);
final ViewPager vp_test= (ViewPager) findViewById(R.id.vp_test);
//初始化数据
List<String> titles=new ArrayList<String>();
titles.add("笑话");
titles.add("欣赏");
titles.add("高考");
titles.add("不得");
List<Fragment> fragments=new ArrayList<Fragment>();
for (int i=0;i<4;i++){
tabs.addTab(tabs.newTab().setText(titles.get(i)));
TestFragment testFragment=new TestFragment(titles.get(i));
fragments.add(testFragment);
}
//设置adapter
FragmentManager fragmentManager =this.getSupportFragmentManager();
TestFragmentAdapter testFragmentAdapter=new TestFragmentAdapter(fragmentManager,fragments,titles);
vp_test.setAdapter(testFragmentAdapter);
//将tablayout 和Viewpager 关联起来
tabs.setupWithViewPager(vp_test);
tabs.setTabsFromPagerAdapter(testFragmentAdapter);
第三步 : 实现 pageadapter
package labelnet.cn.ledou.adpater;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;
import java.util.List;
/**
* Created by yuan on 15-10-21.
*/
public class TestFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
private List<String> titles;
public TestFragmentAdapter(FragmentManager fm,List<Fragment> fragments,List<String> titles) {
super(fm);
this.fragments=fragments;
this.titles=titles;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
return super.instantiateItem(container, position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}
8. NavigationView 实现
实现的是侧边栏效果;
NavigationView 实现需要结合
android.support.v4.widget.DrawerLayout 来实现;
效果图 3 :
实现步揍 :
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
android:background="@color/zhushen_color"
android:fitsSystemWindows="true"
>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/header_layout"
app:menu="@menu/menu_test" />
</android.support.v4.widget.DrawerLayout>
说明 :
(1) 这个实现只需要 两个布局就行了
(2) headrLagout 设置 布局头部信息
(3) app: menu 实现 加载菜单
(4) drawerLayout 中的 android:fitsSystemWindows=”true” , 是为了满足一;
8. toolbar的实现
如图1所示的效果的效果实现;
效果图 :
涉及的布局文件有:
CoordinatorLayout : 丰富 布局效果
AppBarLayout : 配合 toolbar使用
CollapsingToolbarLayout : 配合 toolbar使用
NestedScrollView : 加强版的 ScrollView
实现步揍 :
第一步: 实现布局文件
中间linearLayout , 可以删除 ,没什么用;
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/zhushen_color">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/zhu_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
android:src="@drawable/img_welcome_one"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_bars"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="20dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/Theme.AppCompat.Light.DarkActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/float_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:src="@drawable/abc_textfield_search_material"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
第二步 : 代码实现
如果前面的学习了,后面的实现就很简单了;
package labelnet.cn.ledou;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
/**
* Created by yuan on 15-10-22.
*/
public class toobarActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toobar);
//浮动按钮
final FloatingActionButton float_btn = (FloatingActionButton) findViewById(R.id.float_btn);
float_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(float_btn, "你还好吗?", Snackbar.LENGTH_SHORT)
.show();
}
});
//toolbar
final Toolbar toolbar_bars= (Toolbar) findViewById(R.id.toolbar_bars);
setSupportActionBar(toolbar_bars);
CollapsingToolbarLayout collapsing_toolbarlayout= (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbarlayout);
collapsing_toolbarlayout.setTitle("乐逗-真逗!");
}
}
10 . 总结
虽然效果实现了,但是 没有用到 实际当中,所以后面还有很多要注意的地方;
GitHub 地址 :
https://github.com/LABELNET/AndroidStudioDemo/tree/master/LeDou