自定义可折叠和展开的View

CollapseView如下:

package com.ww.collapseview;
import android.annotation.SuppressLint;
import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.nineoldandroids.view.ViewPropertyAnimator;
/*** * 原创作者:* 谷哥的小弟 http://blog.csdn.net/lfdfhl* * 文档描述:* 实现一个可以折叠和展开部分内容的View* */@SuppressLint("NewApi")
public class CollapseView extends LinearLayout {private Context mContext;private long duration = 200;private TextView mNumberTextView;private TextView mTitleTextView;private ImageView mArrowImageView;private RelativeLayout mContentRelativeLayout;public CollapseView(Context context) {this(context, null);}public CollapseView(Context context, AttributeSet attrs) {super(context, attrs);initView(context);}private void initView(Context context) {mContext=context;LayoutInflater.from(mContext).inflate(R.layout.view_collapse_layout, this);mNumberTextView=(TextView)findViewById(R.id.numberTextView);mTitleTextView =(TextView)findViewById(R.id.titleTextView);mContentRelativeLayout=(RelativeLayout)findViewById(R.id.contentRelativeLayout);mArrowImageView =(ImageView)findViewById(R.id.arrowImageView);mArrowImageView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {rotateArrow();}});collapse(mContentRelativeLayout);}//设置编号public void setNumber(String number){if(!TextUtils.isEmpty(number)){mNumberTextView.setText(number);}}//设置标题public void setTitle(String title){if(!TextUtils.isEmpty(title)){mTitleTextView.setText(title);}}//设置内容public void setContent(int resID){View view=LayoutInflater.from(mContext).inflate(resID,null);RelativeLayout.LayoutParams layoutParams= new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);view.setLayoutParams(layoutParams);mContentRelativeLayout.addView(view);}//显示或者隐藏View,且同时改变箭头方向public void rotateArrow() {int degree = 0;// 反转箭头if (mArrowImageView.getTag() == null || mArrowImageView.getTag().equals(true)) {mArrowImageView.setTag(false);degree = -180;expand(mContentRelativeLayout);} else {degree = 0;mArrowImageView.setTag(true);collapse(mContentRelativeLayout);}ViewPropertyAnimator.animate(mArrowImageView).setDuration(duration).rotation(degree);}/*** 展开View.* * 需要注意的问题:* 在该处对于View的测量从而获得measuredHeight.* 1 View的宽度为屏幕的宽度(即为一个确定值),所以:*   MeasureSpec.makeMeasureSpec(Utils.getScreenWidth(mContext), MeasureSpec.EXACTLY);*   得到widthMeasureSpec.* 2 View的高度为wrap_content.可以利用:*   MeasureSpec.makeMeasureSpec((1<<30)-1, MeasureSpec.AT_MOST)*   得到heightMeasureSpec.*   此处的mode为MeasureSpec.AT_MOST,所以利用(1<<30)-1作为size.*   这样做才能使系统获取到View的真实高度.*   *   比如在TextView的源码就有这样的处理:*    if (heightMode == MeasureSpec.AT_MOST) {*        height = Math.min(desired, heightSize);*    }*    *    这里会取desired和heightSize这两者的较小值赋值给height.*    *    heightSize就是我们传进去的(1<<30)-1*    desired是通过getDesiredHeight()方法获得的.*    *    小结如下:*    若View的宽或高是wrap_content我们手动调用它的measure都可以这样:*    int widthMeasureSpec=MeasureSpec.makeMeasureSpec((1<<30)-1, MeasureSpec.AT_MOST);*    int heightMeasureSpec=MeasureSpec.makeMeasureSpec((1<<30)-1,MeasureSpec.AT_MOST);*    view.measure(widthMeasureSpec,heightMeasureSpec);*    int measuredWidth =   view.getMeasuredWidth();*    int measuredHeight = view.getMeasuredHeight();*/private void expand(final View view) {int widthMeasureSpec=MeasureSpec.makeMeasureSpec(Utils.getScreenWidth(mContext), MeasureSpec.EXACTLY);int heightMeasureSpec=MeasureSpec.makeMeasureSpec((1<<30)-1, MeasureSpec.AT_MOST);view.measure(widthMeasureSpec, heightMeasureSpec);final int measuredHeight = view.getMeasuredHeight();view.setVisibility(View.VISIBLE);Animation animation = new Animation() {@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {if(interpolatedTime == 1){view.getLayoutParams().height =measuredHeight;}else{view.getLayoutParams().height =(int) (measuredHeight * interpolatedTime);}view.requestLayout();}@Overridepublic boolean willChangeBounds() {return true;}};animation.setDuration(duration);view.startAnimation(animation);}// 折叠private void collapse(final View view) {final int measuredHeight = view.getMeasuredHeight();Animation animation = new Animation() {@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {if (interpolatedTime == 1) {view.setVisibility(View.GONE);} else {view.getLayoutParams().height = measuredHeight - (int) (measuredHeight * interpolatedTime);}view.requestLayout();}@Overridepublic boolean willChangeBounds() {return true;}};animation.setDuration(duration);view.startAnimation(animation);}
}

MainActivity如下:

package com.ww.collapseview;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {private CollapseView mCollapseView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);init();}private void init(){mCollapseView=(CollapseView) findViewById(R.id.collapseView);mCollapseView.setNumber("1");mCollapseView.setTitle("This is title");mCollapseView.setContent(R.layout.view_expand);}
}

Utils如下:

package com.ww.collapseview;
import android.content.Context;
import android.util.DisplayMetrics;
import android.view.WindowManager;public class Utils {/*** 获得屏幕高度*/public static int getScreenWidth(Context context) {WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);return outMetrics.widthPixels;}/*** 获得屏幕宽度*/public static int getScreenHeight(Context context) {WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);return outMetrics.heightPixels;}}

activity_main.xml如下:

<LinearLayout 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"android:orientation="vertical"tools:context="${relativePackage}.${activityClass}" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginTop="50dp"android:text="下面是CollapseView控件,点击箭头可见效果" /><com.ww.collapseview.CollapseViewandroid:id="@+id/collapseView"android:layout_marginTop="50dp"android:layout_width="match_parent"android:layout_height="wrap_content" /></LinearLayout>

view_collapse_layout.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#ffffff"android:orientation="vertical"><RelativeLayoutandroid:id="@+id/titleRelativeLayout"android:padding="30px"android:layout_width="match_parent"android:layout_height="170px"android:clickable="true"><TextViewandroid:id="@+id/numberTextView"android:layout_width="70px"android:layout_height="70px"android:gravity="center"android:layout_centerVertical="true"android:background="@drawable/circle_textview"android:clickable="false"android:text="1"android:textStyle="bold"android:textColor="#EBEFEC"android:textSize="35px" /><TextViewandroid:id="@+id/titleTextView"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_toRightOf="@id/numberTextView"android:layout_marginLeft="30px"android:clickable="false"android:text="This is title"android:textColor="#1C1C1C"android:textSize="46px" /><!--  48px 27px--><ImageViewandroid:id="@+id/arrowImageView"android:layout_width="80px"android:layout_height="40px"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:src="@drawable/arrow"android:clickable="false"android:scaleType="centerInside" /></RelativeLayout><Viewandroid:layout_width="match_parent"android:layout_height="2px"android:layout_below="@id/titleRelativeLayout"android:background="#E7E7EF"android:clickable="false"/><!-- 隐藏部分,点击箭头后显示--><RelativeLayoutandroid:id="@+id/contentRelativeLayout"android:visibility="gone"android:layout_width="wrap_content"android:layout_height="wrap_content"></RelativeLayout></LinearLayout>

view_expand.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/textView"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:paddingBottom="40dip"android:paddingTop="40dip"android:text="This is content" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/textView"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:paddingBottom="40dip"android:paddingTop="40dip"android:text="This is content  ,too" /></RelativeLayout>

自定义可折叠和展开的View相关推荐

jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
Android按下录音录音动画效果 ,自定义录音、播放动画View
Android按下录音录音动画效果 ,自定义录音.播放动画View https://download.csdn.net/download/abc2522/10327428?spm=1001.2101. ...
三星与苹果就可折叠屏幕展开谈判
在刚过去不久的 MWC 2019 上,三星和华为都纷纷推出了自己的折叠屏手机,率先掀起折叠屏的浪潮. 近日,韩国媒体 ETNews 援引业内人士报道称,Samsung Display 正在与苹果就可折 ...
【Android】自定义录音、播放动画View，让你的录音浪起来
前言先看效果图嗯,然后大致就是这样,按住录音,然后有一个倒计时,最外层一个进度条,还有一个类似模拟声波的动画效果(其实中间的波浪会根据声音的大小浪起来的~) 实现思路然后,我们适当的来分析一下这 ...
自定义ViewGroup (3) 与子View之间 Touch Event的拦截与处理
2019独角兽企业重金招聘Python工程师标准>>> 在昨天的博客(自定义ViewGroup(2))中,我们解决了多个手指交替滑动带来的页面的跳动问题.但同时也还遗留了两个问题. ...
android自定义view流程,Android 自定义View--从源码理解View的绘制流程
前言在Android的世界里,View扮演着很重要的角色,它是Android世界在视觉上的具体呈现.Android系统本身也提供了很多种原生控件供我们使用,然而在日常的开发中我们很多时候需要去实现一 ...
自定义的ViewGroup中添加自定义View 造成的无法显示问题(个人)
首先说一下我在网上找了很久没有找到说明方法所以我就自己试着写了一下 1.我自定义了一个继承了RelativeLayout的ViewGroup java代码如下: /*** 简单自定义三头像* @aut ...
Android自定义半圆形圆盘滚动选择器View
本文为原创作品,转载请注明出处:https://blog.csdn.net/wjj1996825/article/details/80646526 前段时间公司项目要求做一个特效的滑动选择器,效果如下 ...
自定义实现微信通讯录效果View
欢迎访问我的个人独立博客 ittiger.cn,原创文章,未经允许不得随意转载. 前言在使用App过程中,经常会有使用到联系人或城市列表的场景,其实这两种效果是一样的,都是右边有个索引列表,点击索引 ...
自定义维护视图变量(Maintenance view variant)
SAP后台大部份配置是以维护视图或视图族的形式展现,在前台操作前者可用SM30维护.后者用SM34进行加载维护,视图簇相当于多个视图的集合.SM30.SM30维护的视图(簇)也可以用SE93生成独立的 ...

自定义可折叠和展开的View

自定义可折叠和展开的View相关推荐

最新文章

热门文章