CoordinatorLayout的使用
来源：互联网 发布：五笔for mac 编辑：程序博客网 时间：2024/06/10 01:30
Google在 android.support.design 包中新增的 CoordinatorLayout 布局, 可以简单理解为一个升级版本的 FrameLayout .具体用法如下：
首先我们来看一下运行效果
我们讲的是使用，内部结构是什么，以及滑动冲突就不在次详细说明。
具体的代码操作;
首先我们在Android Studio的gradle中导入需要的包
compile 'de.hdodenhof:circleimageview:1.3.0' compile 'com.android.support:cardview-v7:24.2.1' compile 'com.android.support:design:24.2.1'MainActivity的代码：
package com.xyliwp.news.view.activity;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.widget.ImageView;import android.widget.TextView;import com.xyliwp.news.R;import android.support.design.widget.AppBarLayout;import android.support.design.widget.CollapsingToolbarLayout;import android.support.v7.widget.Toolbar;import android.view.View;import android.view.animation.AlphaAnimation;import android.widget.FrameLayout;import android.widget.LinearLayout;import static com.xyliwp.news.util.Content.setWindowStatusBarColor;/** * Created by wenpengli on 2017/3/15. */public class NewActivity extends Activity{ private static final String TAG = "NewActivity -- "; private String resurt = ""; // 控制ToolBar的变量 private static final float PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR = 0.9f; private static final float PERCENTAGE_TO_HIDE_TITLE_DETAILS = 0.3f; private static final int ALPHA_ANIMATIONS_DURATION = 200; private boolean mIsTheTitleVisible = false; private boolean mIsTheTitleContainerVisible = true; private LinearLayout lin; private ImageView mIvPlaceholder; // 大图片 private LinearLayout mLlTitleContainer; // Title的LinearLayout private FrameLayout mFlTitleContainer; // Title的FrameLayout private AppBarLayout mAblAppBar; // 整个可以滑动的AppBar private TextView mTvToolbarTitle; // 标题栏Title private Toolbar mTbToolbar; // 工具栏 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_new); //该行代码可以省略，母的是为了改变通知栏的颜色 setWindowStatusBarColor(this,R.color.radiobuttonzhong); init(); } private void init(){ Intent intent1 = this.getIntent(); resurt = intent1.getStringExtra("url"); mIvPlaceholder = (ImageView)findViewById(R.id.main_iv_placeholder); mLlTitleContainer = (LinearLayout) findViewById(R.id.main_ll_title_container); lin = (LinearLayout) findViewById(R.id.linearlayout_new_xin); mFlTitleContainer = (FrameLayout )findViewById(R.id.main_fl_title); mAblAppBar = (AppBarLayout)findViewById(R.id.main_abl_bar); mTvToolbarTitle = (TextView )findViewById(R.id.main_tv_toolbar_title); mTbToolbar = (Toolbar )findViewById(R.id.main_tb_toolbar); mTbToolbar.setTitle(""); // AppBar的监听 mAblAppBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { int maxScroll = appBarLayout.getTotalScrollRange(); float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll; handleAlphaOnTitle(percentage); handleToolbarTitleVisibility(percentage); } }); initParallaxValues(); // 自动滑动效果 } // 设置自动滑动的动画效果 private void initParallaxValues() { CollapsingToolbarLayout.LayoutParams petDetailsLp = (CollapsingToolbarLayout.LayoutParams) lin.getLayoutParams(); CollapsingToolbarLayout.LayoutParams petBackgroundLp = (CollapsingToolbarLayout.LayoutParams) mFlTitleContainer.getLayoutParams(); petDetailsLp.setParallaxMultiplier(0.9f); petBackgroundLp.setParallaxMultiplier(0.3f); lin.setLayoutParams(petDetailsLp); mFlTitleContainer.setLayoutParams(petBackgroundLp); } // 处理ToolBar的显示 private void handleToolbarTitleVisibility(float percentage) { if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) { if (!mIsTheTitleVisible) { startAlphaAnimation(mTvToolbarTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE); mIsTheTitleVisible = true; } } else { if (mIsTheTitleVisible) { startAlphaAnimation(mTvToolbarTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE); mIsTheTitleVisible = false; } } } // 控制Title的显示 private void handleAlphaOnTitle(float percentage) { if (percentage >= PERCENTAGE_TO_HIDE_TITLE_DETAILS) { if (mIsTheTitleContainerVisible) { startAlphaAnimation(mLlTitleContainer, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE); mIsTheTitleContainerVisible = false; } } else { if (!mIsTheTitleContainerVisible) { startAlphaAnimation(mLlTitleContainer, ALPHA_ANIMATIONS_DURATION, View.VISIBLE); mIsTheTitleContainerVisible = true; } } } // 设置渐变的动画 public static void startAlphaAnimation(View v, long duration, int visibility) { AlphaAnimation alphaAnimation = (visibility == View.VISIBLE) ? new AlphaAnimation(0f, 1f) : new AlphaAnimation(1f, 0f); alphaAnimation.setDuration(duration); alphaAnimation.setFillAfter(true); v.startAnimation(alphaAnimation); }}AvatarImageBehavior类为图片控件位置动画效果具体代码如下：
package com.xyliwp.news.view.activity;import android.content.Context;import android.support.design.widget.CoordinatorLayout;import android.support.v7.widget.Toolbar;import android.util.AttributeSet;import android.view.View;import com.xyliwp.news.R;import de.hdodenhof.circleimageview.CircleImageView;/** * 图片控件位置动画 * */@SuppressWarnings("unused")public class AvatarImageBehavior extends CoordinatorLayout.Behavior<CircleImageView> { private final static float MIN_AVATAR_PERCENTAGE_SIZE = 0.3f; private final static int EXTRA_FINAL_AVATAR_PADDING = 80; private int mStartYPosition; // 起始的Y轴位置 private int mFinalYPosition; // 结束的Y轴位置 private int mStartHeight; // 开始的图片高度 private int mFinalHeight; // 结束的图片高度 private int mStartXPosition; // 起始的X轴高度 private int mFinalXPosition; // 结束的X轴高度 private float mStartToolbarPosition; // Toolbar的起始位置 private final Context mContext; private float mAvatarMaxSize; public AvatarImageBehavior(Context context, AttributeSet attrs) { mContext = context; init(); } private void init() { bindDimensions(); } private void bindDimensions() { mAvatarMaxSize = mContext.getResources().getDimension(R.dimen.image_width); } @Override public boolean layoutDependsOn(CoordinatorLayout parent, CircleImageView child, View dependency) { // 依赖Toolbar控件 return dependency instanceof Toolbar; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) { // 初始化属性 shouldInitProperties(child, dependency); // 最大滑动距离: 起始位置-状态栏高度 final int maxScrollDistance = (int) (mStartToolbarPosition - getStatusBarHeight()); // 滑动的百分比 float expandedPercentageFactor = dependency.getY() / maxScrollDistance; // Y轴距离 float distanceYToSubtract = ((mStartYPosition - mFinalYPosition) * (1f - expandedPercentageFactor)) + (child.getHeight() / 2); // X轴距离 float distanceXToSubtract = ((mStartXPosition - mFinalXPosition) * (1f - expandedPercentageFactor)) + (child.getWidth() / 2); // 高度减小 float heightToSubtract = ((mStartHeight - mFinalHeight) * (1f - expandedPercentageFactor)); // 图片位置 child.setY(mStartYPosition - distanceYToSubtract); child.setX(mStartXPosition - distanceXToSubtract); // 图片大小 CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams(); lp.width = (int) (mStartHeight - heightToSubtract); lp.height = (int) (mStartHeight - heightToSubtract); child.setLayoutParams(lp); return true; } /** * 初始化动画值 * * @param child 图片控件 * @param dependency ToolBar */ private void shouldInitProperties(CircleImageView child, View dependency) { // 图片控件中心 if (mStartYPosition == 0) mStartYPosition = (int) (child.getY() + (child.getHeight() / 2)); // Toolbar中心 if (mFinalYPosition == 0) mFinalYPosition = (dependency.getHeight() / 2); // 图片高度 if (mStartHeight == 0) mStartHeight = child.getHeight(); // Toolbar缩略图高度 if (mFinalHeight == 0) mFinalHeight = mContext.getResources().getDimensionPixelOffset(R.dimen.image_final_width); // 图片控件水平中心 if (mStartXPosition == 0) mStartXPosition = (int) (child.getX() + (child.getWidth() / 2)); // 边缘+缩略图宽度的一半 if (mFinalXPosition == 0) mFinalXPosition = mContext.getResources().getDimensionPixelOffset(R.dimen.abc_action_bar_content_inset_material) + (mFinalHeight / 2); // Toolbar的起始位置 if (mStartToolbarPosition == 0) mStartToolbarPosition = dependency.getY() + (dependency.getHeight() / 2); } // 获取状态栏高度 public int getStatusBarHeight() { int result = 0; int resourceId = mContext.getResources().getIdentifier("status_bar_height", "dimen", "android"); if (resourceId > 0) { result = mContext.getResources().getDimensionPixelSize(resourceId); } return result; }}XML文件的类容：
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:fitsSystemWindows="false"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/main_abl_bar"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="450dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <LinearLayout android:id="@+id/linearlayout_new_xin" android:layout_width="match_parent" android:layout_height="350dp" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/radiobuttonzhong" android:orientation="horizontal"> <LinearLayout android:id="@+id/linearLayout_new_back" android:layout_width="50dp" android:layout_height="50dp" android:orientation="vertical" android:gravity="center"> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center" android:background="@mipmap/back" /> </LinearLayout> <TextView android:id="@+id/textview_new_sousuo" android:layout_width="0dp" android:layout_weight="1" android:layout_height="49dp" android:gravity="center" android:text="明星简介" android:textStyle="bold" android:textColor="@color/baise" android:textSize="22sp" /> <TextView android:layout_width="49dp" android:layout_height="49dp" android:gravity="center"/> </LinearLayout> <ImageView android:id="@+id/main_iv_placeholder" android:layout_width="match_parent" android:layout_height="300dp" android:scaleType="centerCrop" android:src="@mipmap/yangmi" app:layout_collapseMode="parallax" /> </LinearLayout> <FrameLayout android:id="@+id/main_fl_title" android:layout_width="match_parent" android:layout_height="150dp" android:layout_gravity="bottom|center_horizontal" android:background="@color/radiobuttonzhong" app:layout_collapseMode="parallax"> <LinearLayout android:id="@+id/main_ll_title_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical"> <TextView android:layout_marginTop="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center" android:text="@string/person_name" android:textColor="@android:color/white" android:textSize="30sp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="4dp" android:text="@string/person_title" android:textColor="@android:color/white" /> </LinearLayout> </FrameLayout> </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" android:scrollbars="none" app:behavior_overlapTop="30dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.CardView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="8dp" app:cardElevation="8dp" app:contentPadding="16dp"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:lineSpacingExtra="8dp" android:text="@string/person_intro" /> </android.support.v7.widget.CardView> </android.support.v4.widget.NestedScrollView> <android.support.v7.widget.Toolbar android:id="@+id/main_tb_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/radiobuttonzhong" app:layout_anchor="@id/main_fl_title"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal"> <Space android:layout_width="@dimen/image_final_width" android:layout_height="@dimen/image_final_width" /> <TextView android:id="@+id/main_tv_toolbar_title" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="8dp" android:gravity="center_vertical" android:text="@string/person_name" android:textColor="@android:color/white" android:textSize="20sp" android:visibility="invisible"/> </LinearLayout> </android.support.v7.widget.Toolbar> <de.hdodenhof.circleimageview.CircleImageView android:layout_width="@dimen/image_width" android:layout_height="@dimen/image_width" android:layout_gravity="center" android:src="@mipmap/yangmi" app:border_color="@android:color/white" app:border_width="2dp" app:layout_behavior=".view.activity.AvatarImageBehavior" /></android.support.design.widget.CoordinatorLayout>strings.xml文件如下：
<resources> <string name="person_name">杨幂</string> <string name="person_title">女神</string> <string name="person_intro"> 杨幂，1986年9月12日出生于北京市，中国内地影视女演员、流行乐歌手、影视制片人。 2005年，杨幂进入北京电影学院表演系本科班就读。2006年，杨幂因出演金庸武侠剧《神雕侠侣》而崭露头角。 2008年，杨幂凭借历史剧《王昭君》获得了第24届中国电视金鹰奖观众喜爱的电视剧女演员奖提名[1] 。 2009年，杨幂在“80后新生代娱乐大明星”评选活动中与其她三位女演员共同被评为“四小花旦”[2] 。 2011年，杨幂凭借穿越剧《宫锁心玉》赢得广泛关注[3] ，并获得了第17届上海电视节白玉兰奖观众票选最具人气女演员奖[4] 。 2012年，杨幂工作室成立，而她则凭借都市剧《北京爱情故事》相继获得第9届金鹰电视艺术节最具人气女演员奖[5] 、第26届中国电视金鹰奖观众喜爱的电视剧女演员奖提名[6] 。 2015年，杨幂主演的《小时代》系列电影取得了近18亿人民币的票房成绩[7] 。 2016年，其主演的职场剧《亲爱的翻译官》取得全国年度电视剧收视冠军[8] 。 2017年，她主演的仙侠剧《三生三世十里桃花》获得颇高关注。</string></resources>dimens.xml文件如下：
<resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name="fab_margin">16dp</dimen> <dimen name="image_final_width">32dp</dimen> <dimen name="spacing_normal">16dp</dimen> <dimen name="image_width">120dp</dimen> <dimen name="title_margin">20dp</dimen></resources>我们在代码中使用的图片为：
里面的颜色代码 我就不贴出来了。
0 0
- CoordinatorLayout、SwipeRefreshLayout的使用
- CoordinatorLayout的使用
- CoordinatorLayout的简单使用
- CoordinatorLayout的使用
- CoordinatorLayout的使用
- CoordinatorLayout+AppBarLayout的使用
- CoordinatorLayout的使用
- CoordinatorLayout的使用
- CoordinatorLayout的简单使用
- CoordinatorLayout的使用
- CoordinatorLayout的使用
- CoordinatorLayout嵌套AppBarLayout的使用
- CoordinatorLayout的使用如此简单
- CoordinatorLayout 属性的使用介绍
- CoordinatorLayout布局的使用方式
- andoid之CoordinatorLayout的使用
- 使用CoordinatorLayout时的注意事项
- CoordinatorLayout的使用如此简单
- poj3067 Japan 树状数组 逆序数
- 浅谈css中浮动和清除浮动带来的影响
- JVM入门
- 编程题
- 构建二叉树的两种方式(前+中) (中+后)，递归
- CoordinatorLayout的使用
- 剑指Offer4：替换空格
- 如何在腾讯云上开发一款O2O书签？
- 数据结构--基本数据结构
- 第七届蓝桥杯b组第四题-快速排序
- jaxb 序列化与反序列化是遇到的问题
- oracle创建用户
- jquery 常规绑定事件click与on委托绑定测试
- DedeCMS模板修改方法
