213.m1-至动画实现布局的显示与隐藏

原创 于 2017-06-14 00:38:08 发布 · 398 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

值动画的使用，值动画是3.0以后出现的,引入nineoldandroids-2.4.0.jar可以实现向下兼容。当我们需要实现点击按钮，实现某个部件显示与隐藏的时候，可以对部件的y坐标做一个值动画（高度由0-height），首先需要获取到准备隐藏的部件的高度，

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//值动画需要带参数ofInt，，可变参数，变化由0-50-150之间变化
		ValueAnimator animator=ValueAnimator.ofInt(0,50,150);//  0-50 -150 
		//监听当前的变化值
		animator.addUpdateListener(new AnimatorUpdateListener() {
			
			@Override
			public void onAnimationUpdate(ValueAnimator animation) {
				// 当前时间点变化后的值
				int value=(Integer) animation.getAnimatedValue();  
				System.out.println(value);
			}
		});
		//动画的持续时间
		animator.setDuration(500);
		//开始动画
		animator.start();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

}

模块的布局文件activity_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/safe_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp" >

    <RelativeLayout
        android:id="@+id/safe_title_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >

        <LinearLayout
            android:id="@+id/safe_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/iv_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside" />

            <ImageView
                android:id="@+id/iv_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:scaleType="centerInside" />

            <ImageView
                android:id="@+id/iv_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:scaleType="centerInside" />

            <ImageView
                android:id="@+id/iv_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:scaleType="centerInside" />
        </LinearLayout>

        <ImageView
            android:id="@+id/safe_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="centerInside"
            android:src="@drawable/arrow_down" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/safe_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/safe_title_layout"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/des_layout_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside" />

            <TextView
                android:id="@+id/des_tv_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="12dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/des_layout_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside" />

            <TextView
                android:id="@+id/des_tv_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="12dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/des_layout_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside" />

            <TextView
                android:id="@+id/des_tv_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="12dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/des_layout_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/des_iv_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside" />

            <TextView
                android:id="@+id/des_tv_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="#ff7a7a7a"
                android:textSize="12dp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

DetailActivity.java


package com.ldw.market;

/*
 * 左侧的详情页
 */
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.HorizontalScrollView;

import com.ldw.market.domain.AppInfo;
import com.ldw.market.fragment.BaseFragment1;
import com.ldw.market.holder.DetailDesHolder;
import com.ldw.market.holder.DetailInfoHolder;
import com.ldw.market.holder.DetailSafeHolder;
import com.ldw.market.holder.DetailScreenHolder;
import com.ldw.market.protocol.DetailProtocol;
import com.ldw.market.utils.UiUtils;
import com.ldw.market.view.LoadingPage;
import com.ldw.market.view.LoadingPage.LoadResult;

public class DetailActivity extends BaseActivity{
	
	private String packageName;
	private AppInfo data;
	@Override
	protected void initView() {
		System.out.println("3333" + view);
		LoadingPage loadingPage = new LoadingPage(this){

			@Override
			protected LoadResult load() {
				return DetailActivity.this.load();
			}
			@Override
			public View createSuccessView() {
				return DetailActivity.this.createSuccessView();
			}
		};
		System.out.println("4444" + view);
		loadingPage.show();
		setContentView(loadingPage);
	}
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		System.out.println("1111" + view);
		// 获取到打开当前activity的意图对象
		Intent intent = getIntent();  
		//获取到传递过来的包名
		packageName = intent.getStringExtra("packageName");
		//再执行父类的方法
		super.onCreate(savedInstanceState);
		
	}
	
	private FrameLayout bottom_layout,detail_info,detail_safe,detail_des;
	private HorizontalScrollView detail_screen;
	private DetailInfoHolder detailInfoHolder;
	private DetailScreenHolder screenHolder;//图片
	private DetailSafeHolder safeHolder;//安全
	private DetailDesHolder desHolder;
	private View view;
	
	//加载成功的界面
	protected View createSuccessView() {
		view = View.inflate(UiUtils.getContext(), R.layout.activity_detail, null);
		// 添加信息区域
		bottom_layout=(FrameLayout) view.findViewById(R.id.bottom_layout);
				
		//  操作 应用程序信息
		detail_info=(FrameLayout) view.findViewById(R.id.detail_info);
		detailInfoHolder=new DetailInfoHolder();//创建holder
		detailInfoHolder.setData(data);//携带参数,传递到holder，调用refreshView方法
		detail_info.addView(detailInfoHolder.getContentView());//holder中初始化布局
		System.out.println("555555" + view);
		
		//安全标记
		detail_safe=(FrameLayout) view.findViewById(R.id.detail_safe);
		safeHolder=new DetailSafeHolder();
		safeHolder.setData(data);
		detail_safe.addView(safeHolder.getContentView());
		
		/*
		detail_des=(FrameLayout) view.findViewById(R.id.detail_des);
		desHolder=new DetailDesHolder();
		desHolder.setData(data);
		detail_des.addView(desHolder.getContentView());
		*/
		// 中间5张图片
		detail_screen=(HorizontalScrollView) view.findViewById(R.id.detail_screen);
		screenHolder=new DetailScreenHolder();
		screenHolder.setData(data);
		detail_screen.addView(screenHolder.getContentView());
		
		return view;
	}

	//请求服务器加载数据
	protected LoadResult load() {
		//服务器请求包名的数据
		DetailProtocol protocol=new DetailProtocol(packageName);
		data = protocol.load(0);
		System.out.println("555555data" + data);
		if(data == null){
			return LoadResult.error;
		}else{
			return LoadResult.success;
		}
	}

	@Override
	protected void initActionBar() {
		super.initActionBar();
		//获取到actionBar，使用getSupportActionBar，getActionBar是android.app下面的getActionBar
		ActionBar actionBar = getSupportActionBar();
		//图标的显示与隐藏，显示返回按钮
		actionBar.setDisplayHomeAsUpEnabled(true);
	}
	
	/*
	// 处理actionBar菜单条目的点击事件，实现点击图标来隐藏当前的界面 
    @Override
	public boolean onOptionsItemSelected(MenuItem item) {
		System.out.println("所有");
		//当前点击的条目是search
		if (item.getItemId() == android.R.id.home) {
			finish();
		}
		return super.onOptionsItemSelected(item);
	}
    */
}


DetailSafeHolder.java

package com.ldw.market.holder;

import java.util.List;

import android.graphics.Color;
import android.view.View;
import android.view.View.MeasureSpec;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.ldw.market.R;
import com.ldw.market.domain.AppInfo;
import com.ldw.market.http.HttpHelper;
import com.ldw.market.utils.UiUtils;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;
import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.Animator.AnimatorListener;
import com.nineoldandroids.animation.ValueAnimator;
import com.nineoldandroids.animation.ValueAnimator.AnimatorUpdateListener;

public class DetailSafeHolder extends BaseHolder<AppInfo> implements OnClickListener {

	@ViewInject(R.id.safe_layout)
	private RelativeLayout safe_layout;
	@ViewInject(R.id.safe_content)
	private LinearLayout safe_content;//需要被隐藏的线性布局
	@ViewInject(R.id.safe_arrow)
	private ImageView safe_arrow;//隐藏显示的按钮图标
	ImageView[] ivs;//安全的几个图标
	ImageView[] iv_des;
	TextView[] tv_des;
	LinearLayout[] des_layout;
	@Override
	public View initView() {
		View view = UiUtils.inflate(R.layout.detail_safe);
		ViewUtils.inject(this, view);
		
		ivs = new ImageView[4]; // 初始化标题栏的图片
		ivs[0] = (ImageView) view.findViewById(R.id.iv_1);
		ivs[1] = (ImageView) view.findViewById(R.id.iv_2);
		ivs[2] = (ImageView) view.findViewById(R.id.iv_3);
		ivs[3] = (ImageView) view.findViewById(R.id.iv_4);
		iv_des = new ImageView[4]; // 初始化每个条目描述的图片
		iv_des[0] = (ImageView) view.findViewById(R.id.des_iv_1);
		iv_des[1] = (ImageView) view.findViewById(R.id.des_iv_2);
		iv_des[2] = (ImageView) view.findViewById(R.id.des_iv_3);
		iv_des[3] = (ImageView) view.findViewById(R.id.des_iv_4);
		tv_des = new TextView[4]; // 初始化每个条目描述的文本
		tv_des[0] = (TextView) view.findViewById(R.id.des_tv_1);
		tv_des[1] = (TextView) view.findViewById(R.id.des_tv_2);
		tv_des[2] = (TextView) view.findViewById(R.id.des_tv_3);
		tv_des[3] = (TextView) view.findViewById(R.id.des_tv_4);

		des_layout = new LinearLayout[4]; // 初始化条目线性布局
		des_layout[0] = (LinearLayout) view.findViewById(R.id.des_layout_1);
		des_layout[1] = (LinearLayout) view.findViewById(R.id.des_layout_2);
		des_layout[2] = (LinearLayout) view.findViewById(R.id.des_layout_3);
		des_layout[3] = (LinearLayout) view.findViewById(R.id.des_layout_4);
		
		//初始化状态，默认是收起来的
		LayoutParams layoutParams = safe_content.getLayoutParams();
		layoutParams.height=0;
		safe_content.setLayoutParams(layoutParams);
		safe_arrow.setImageResource(R.drawable.arrow_down);
		return view;
	}

	@Override
	public void refreshView(AppInfo data) {
		//布局的
		safe_layout.setOnClickListener(this);
		//获取到链接的url
		List<String> safeUrl = data.getSafeUrl();
		List<String> safeDesUrl = data.getSafeDesUrl();
		List<String> safeDes = data.getSafeDes();
		List<Integer> safeDesColor = data.getSafeDesColor(); // 0 1 2 3分别代表不同的颜色
		//显示4个或者小于四个图片，超出的部分GONE
		for (int i = 0; i < 4; i++) {
			if (i < safeUrl.size() && i < safeDesUrl.size()
					&& i < safeDes.size() && i < safeDesColor.size()) {
				ivs[i].setVisibility(View.VISIBLE);
				des_layout[i].setVisibility(View.VISIBLE);
				//根据链接显示图片
				bitmapUtils.display(ivs[i], HttpHelper.URL + "image?name="
						+ safeUrl.get(i));
				bitmapUtils.display(iv_des[i], HttpHelper.URL + "image?name="
						+ safeDesUrl.get(i));
				tv_des[i].setText(safeDes.get(i));
				// 根据服务器数据显示不同的颜色
				int color;
				int colorType = safeDesColor.get(i);
				if (colorType >= 1 && colorType <= 3) {
					color = Color.rgb(255, 153, 0); // 00 00 00
				} else if (colorType == 4) {
					color = Color.rgb(0, 177, 62);
				} else {
					color = Color.rgb(122, 122, 122);
				}
				tv_des[i].setTextColor(color);
			}else {
				ivs[i].setVisibility(View.GONE);
				des_layout[i].setVisibility(View.GONE);
			}
		}
	}

	boolean flag;//内容是否隐藏
	@Override
	public void onClick(View v) {
		if(v.getId() == R.id.safe_layout){
			int  startHeight;//起始的高度
			int targetHeight;//准备移动到的目标高度
			if(!flag){//展开动画
				startHeight=0;
				targetHeight=getMeasureHeight();
				flag = true;
				//之前是隐藏的，设置为可见
				//safe_content.setVisibility(View.VISIBLE);
			}else{
				flag = false;
				//safe_content.setVisibility(View.GONE);
				startHeight=getMeasureHeight();
				targetHeight=0;
			}
			// 值动画隐藏
			ValueAnimator animator=ValueAnimator.ofInt(startHeight,targetHeight);
			//相对布局的LayoutParams
			final RelativeLayout.LayoutParams layoutParams = (android.widget.RelativeLayout.LayoutParams) safe_content.getLayoutParams();
			//监听动画的值
			animator.addUpdateListener(new AnimatorUpdateListener() {  // 监听值的变化
				
				@Override
				public void onAnimationUpdate(ValueAnimator animator) {
					// 获取运行当前时间点的一个值
					int value=(Integer) animator.getAnimatedValue();
					layoutParams.height=value;
					// 刷新界面，高度发生改变
					safe_content.setLayoutParams(layoutParams);
					System.out.println(value);
				}
			});
			
			//监听动画执行的过程，动画执行结束以后，箭头的方向应该需要改变
			animator.addListener(new AnimatorListener() {

				@Override
				public void onAnimationCancel(Animator arg0) {
					// TODO Auto-generated method stub
					
				}

				//动画结束的时候调用
				@Override
				public void onAnimationEnd(Animator arg0) {
					if(flag){
						//展开的状态，箭头向上
						safe_arrow.setImageResource(R.drawable.arrow_up);
					}else{
						safe_arrow.setImageResource(R.drawable.arrow_down);
					}
					
				}

				@Override
				public void onAnimationRepeat(Animator arg0) {
					// TODO Auto-generated method stub
					
				}

				@Override
				public void onAnimationStart(Animator arg0) {
					// TODO Auto-generated method stub
					
				}  // 监听动画执行
			});
			//持续500ms
			animator.setDuration(500);
			animator.start();
		}
		
	}
	
	//onMeasure()  制定测量的规则 
	// measure() 实际测量 ，不能复写，只能先复写onMeasure() 
	/*
	 * 获取控件实际的高度
	 */
	public int getMeasureHeight(){
		//  由于宽度不会发生变化  宽度的值取出来
		int width = safe_content.getMeasuredWidth();  
		//  高度不固定，让高度包裹内容
		safe_content.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT;

		//    参数1  测量控件mode    参数2  大小 
		int widthMeasureSpec=MeasureSpec.makeMeasureSpec(MeasureSpec.EXACTLY, width);  //  mode+size，宽度是精确值
		int heightMeasureSpec=MeasureSpec.makeMeasureSpec(MeasureSpec.AT_MOST, 1000);// 高度是模糊值， 最大是1000
		// 测量规则 宽度是一个精确的值width, 高度最大是1000,以实际为准
		safe_content.measure(widthMeasureSpec, heightMeasureSpec); // 通过该方法重新测量控件 
		
		return safe_content.getMeasuredHeight();
		
	}

}


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值