注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

罔少年

QQ 332256483

 
 
 

日志

 
 

Android 滑动块  

2017-01-17 10:13:00|  分类: android |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Android 滑动块 - 我是小黄人 - 爵爷
 
原理: 通过Animation动画来改变ImageView的位置及大小


<ImageView
android:id="@+id/image_bar"
android:layout_width="180dp"
android:layout_height="2dp"
android:layout_alignParentBottom="true"
android:layout_margin="0dp"
android:background="#E83030" />
UtilBar.class
import android.content.Context;
import android.util.DisplayMetrics;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
/**
* Created by jiemiao.zhang on 2015/3/12.
*/
public class UtilBar {
private Context mContext;
private ImageView mImageView; //滑动块
private int[] mBarCell; //每个item比例
private int barTotal = 1; //每个item比例之和
private int currIndex = 0;// 当前选项卡下标,01234....
float toScaleX = 1f; //滑动条结束时在X上的伸缩尺寸
float currentScaleX = 1f; //滑动条开始时在X上的伸缩尺寸
public int duration = 500; //动画时间
int screenWidth = 320; //每个滑块的宽度

/**
* 非等比例选项卡
* @param context
* @param imageView 滑动块控件
* @param barCell 滑动条对应选项卡的宽度比例值,int{2,2,2,1}
*/
public UtilBar(Context context, ImageView imageView, int[] barCell){

mContext= context;

mImageView = imageView;

mBarCell = barCell;

barTotal = getBarTotal(mBarCell);
}
    /**
* 默认为2个等比例选项卡,选择第一个
*/
public UtilBar(Context context, ImageView imageView) {

mContext = context;

mImageView = imageView;

mBarCell = new int[]{1,1};

barTotal = getBarTotal(mBarCell);

initImageBar(0);

}

/**
* 滑动条初始
* @param defaultIndex 默认滑动的下标
*/
public void initImageBar(int defaultIndex) {

// 获取分辨率宽度
DisplayMetrics dm = mContext.getResources().getDisplayMetrics();
screenWidth = dm.widthPixels;
// 获取滑动块图片宽度
int ivCursorWidth = mContext.getResources().getDrawable(R.drawable.data_oil_price_bar).getIntrinsicWidth();
//获取第一个选项卡对应滑动条的宽度
int defaultWidth = screenWidth * mBarCell[0] / barTotal;
// //判断滑动块图片和第一个选项卡对应的滑动块的宽度
// if (ivCursorWidth > defaultWidth) {
// mImageView.getLayoutParams().width = defaultWidth;
// }
mImageView.getLayoutParams().width = defaultWidth;
//滑动滑动条
changeBar(defaultIndex);
}
/**
* 滑动条滑动条
* @param toIndex
*/
public void changeBar(int toIndex) {
float fromXDelta = 0; //滑动条起始坐标
float toXDelta = 0; //滑动条结尾坐标

float fromX = 1;
float toX = 1;

//重复滑动同一个
if (currIndex == toIndex) {
return;
}

if (currIndex == 0) {
fromXDelta = 0;
} else {
fromXDelta = screenWidth * getToXDelta(currIndex) / barTotal;
}

if (toIndex == 0) {
toXDelta = 0;
} else {
toXDelta = screenWidth * getToXDelta(toIndex) / barTotal;
}

toX = mBarCell[toIndex];
fromX = mBarCell[currIndex];

currIndex = toIndex;

toScaleX = (float) (toX / fromX);

//改变滑动条位置
Animation translateAnimation = new TranslateAnimation(fromXDelta, toXDelta, 0, 0);
//改变滑动条宽度
Animation scaleAnimation = new ScaleAnimation(currentScaleX, toScaleX * currentScaleX, 1.0f, 1.0f);
currentScaleX = toScaleX * currentScaleX;

AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.setDuration(duration);
animationSet.setFillAfter(true);
animationSet.setFillEnabled(true);
mImageView.startAnimation(animationSet);
}

//获取滑动条总比例
private static int getBarTotal(int[] aa) {
int totalVal = 0;
if (aa != null && aa.length > 0) {
for (int c : aa) {
totalVal += c;
}
}
return totalVal;
}

//滑动条的累计值
private int getToXDelta(int index) {
if (index == 0) {
return 0;
}
int allVal = 0;
for (int i = 0; i < index; i++) {

allVal += mBarCell[i];
}
return allVal;
}

}
在Activity中使用
//初始化选项卡
image_bar = (ImageView) findViewById(R.id.image_bar);
UtilBar utilBar = new UtilBar(this, image_bar);
//改变选项卡位置
utilBar.changeBar(1);

如果非等比例选项卡,如下
Android 滑动块 - 我是小黄人 - 爵爷
 
//非等比例,初始化选项卡
image_bar = (ImageView) findViewById(R.id.image_bar);
UtilBar utilBar = new UtilBar(this, image_bar,  {4,3,2,2,2});
//改变选项卡位置
utilBar.changeBar(1);
  评论这张
 
阅读(22)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018