文档章节

机锋市场的界面实现1

cxlin007
 cxlin007
发布于 2012/10/15 11:06
字数 1157
阅读 74
收藏 0

本人很喜欢机锋市场的界面风格,不管是网页还是手机应用,总是能在偶然间给人眼前一亮的感觉,所以一直想看看它到底是怎么实现的,苦于找不到有介绍的文章,只好自己来了。本文主要是基于机锋android客户端的0.9.5beta版本,通过反编译来查看它的界面到底是如何实现的,由于能力有限,所以很多东西不一定都正确,也不一定都是机锋市场的原始的实现,只能尽量接近它的实现。有什么不对的地方,还请大家多多指点啊。

那么就先从机锋市场的首页讲起,先来看图

这个界面的内容就两块,一个是背景图片,还有一个就是横向的进度条,这个页面特别的地方就在这个进度条上了。这种进度条我们在很多网站或是电脑上的软件都有见过,但是在android手机上我们常见的还是圆形的不断旋转的这种进度条,机锋的这个进度条我在手机上还是第一次见。那么她是如何实现的呢...我们先来看下它的布局文件(反编译出来的)

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView android:id="@+id/iv_splashBg" android:layout_width="fill_parent" 
        android:layout_height="fill_parent" android:scaleType="matrix" />
    <LinearLayout android:gravity="center" android:id="@+id/ll_loading" 
        android:background="@drawable/toast_bg" android:layout_width="wrap_content" 
        android:layout_height="wrap_content" android:layout_marginBottom="40.0dip" 
        android:layout_alignParentBottom="true" android:layout_centerHorizontal="true">
        <TextView android:id="@+id/splash_text" android:layout_width="wrap_content" 
            android:layout_height="wrap_content" android:text="@string/init_data" 
            style="\@style/text_style_1e" />
        <ProgressBar android:id="@+id/splash_loading" android:layout_width="54.0dip"
             android:layout_height="wrap_content" android:minHeight="18dip" 
             android:maxHeight="18dip" android:indeterminateOnly="true" />
    </LinearLayout>
</RelativeLayout>

在布局文件中没有见到特别的控件,都是系统自带的控件啊(事实上,当我看到机锋的进度条的时候,我想到了两种实现方法,一种就是帧动画,我画出7张图片来,通过真动画不断循环播放,这个理论上应该是可以的,不过不会ps没实现。还有一种就是自己定义一个控件,不断的进行重绘,来实现动画,下面是代码

public class UserView extends View{

	private Paint mPaint;
	private boolean flag = true;
	private int index = 0;
	private int direction = 0;//0 向右,1向左
	private LoopThread loopThread;
	
	public UserView(Context context) {
		super(context);
		init();
		
	}
	
	public UserView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	
	public UserView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	private void init(){
		mPaint = new Paint();
		mPaint.setColor(0xffC8C8C8);
	}
	
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		int offect = 0;
		mPaint.setStyle(Style.FILL);
		for (int i = 0; i < 4; i++) {
			if(index==i){
				mPaint.setColor(0xffFFB43C);
				offect = 2;
			}else{
				mPaint.setColor(0xffC8C8C8);
				offect = 0;
			}
			canvas.drawRect(10 + 20*i -offect, 10 - offect, 20 + 20*i + offect, 20 + offect, mPaint);
		}
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		setMeasuredDimension(90, 30);//设置控件的高宽
	}
	
	
	public void start(){
		if(loopThread==null){
			flag = true;
			loopThread = new LoopThread();
			loopThread.start();
		}else{
			flag = false;
			loopThread.interrupt();
			loopThread = new LoopThread();
			flag = true;
			loopThread.start();
			
		}
	}
	
	public void stop(){
		if(loopThread!=null){
			loopThread.interrupt();
		}   
		flag = false;
	}
	
	private int nextIndex(int index){
		int i = 0;
		switch(direction){
		case 0:
			if(index+1>3 ){
				direction = 1;
				i = index-1;
			}else{
			    i = index+1;
			}
			break;
		case 1:
			if(index-1<0){
				direction = 0;
				i = index+1;
			}else{
				i = index-1;
			}
			break;
		}
		return i;
	}
	
	private class LoopThread extends Thread{
		
		@Override
		public void run() {
			while(true){
				try {
					Thread.sleep(200);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
				if(!flag) break;
				index = nextIndex(index);
				postInvalidate();
			}
			
		}
		
	}
}

也能实现,而且效果差不多,麻烦的地方,就是要自己控制线程。)

我们再来看看它的源码(改动了一些)

progressBar.setIndeterminateDrawable(new LoadDrawable(4, 0xffC8C8C8, 0xffFFB43C));

只是对进度条设置了图片,关键点还是在LoadDrawable这个类中(由于反编译后的源码有部分乱码,下面的源码都是我根据它实现的大概思路自己重写的,以后的源码也会有类似的情况)

public class LoadDrawable extends AnimationDrawable{

	private int size = 4;
	private int width;
	private int height = 30;
	private Paint mPaint;
	private int defaultColor,currentColor;
	

	public LoadDrawable(int size,int defaultColor,int currentColor) {
		this.defaultColor = defaultColor;
		this.currentColor = currentColor;
		this.size = size;
		width =  (size*2 + 1) * 10;
		mPaint = new Paint();
		mPaint.setStyle(Style.FILL);
		initDrawable();
		setOneShot(false);
	}
	
	private void initDrawable(){
		for (int i = 0; i < size; i++) {
			addFrame(drawByIndex(i), 200);
		}
		for (int i = size-2; i > 0; i--) {
			addFrame(drawByIndex(i), 200);
		}
	}
	
	private Drawable drawByIndex(int index){
		
		Bitmap b = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
		Canvas c = new Canvas(b);
		int offect = 0;
		for (int i = 0; i < 4; i++) {
			if(index==i){
				mPaint.setColor(currentColor);
				offect = 2;
			}else{
				mPaint.setColor(defaultColor);
				offect = 0;
			}
			c.drawRect(10 + 20*i -offect, 10 - offect, 20 + 20*i + offect, 20 + offect, mPaint);
		}
		return new BitmapDrawable(b);
	}

}

我们发现事实上有点想我之前的两种方法的结合,自定义了一个AnimationDrawable类,又自己绘制了每一帧的图片。

这里注意下setOneShot(false)可以使动画图片不断循环。

ok,这样机锋市场的首页就大功告成了啊

后面会陆续写些机锋市场界面的其他实现

 

© 著作权归作者所有

cxlin007

cxlin007

粉丝 2
博文 47
码字总数 28683
作品 0
福州
私信 提问
国内主流Android安卓应用市场简介

GOOGLE对安卓市场的建设比较开放,所以安卓应用市场有点小乱,不懂行的经常搞不清楚哪个是官方、哪些是第三方。本文小结下国内几个主流的Android市场: 1. Android Market 官方的 大名不用介...

长平狐
2012/08/09
898
0
360旗下应用疑遭国内安卓商店机锋市场下架

下图是来自机锋市场的搜索界面截图: DoNews 3月9日消息 9日下午,据消息人士透露360旗下所有应用被国内知名Android应用商店机锋市场下架,对此机锋市场方面没有给出评论,但分析称可能是由于...

红薯
2012/03/10
1K
21
Android 国内应用市场的汇总

2010年在国内出现了Android系统智能机的大规模发展,而应用商城也在火拼起来,下面我推荐一下国内Android的免费软件商城。 应用汇 掌上应用汇是一款基于Android系统的本土化软件市场,掌上应...

长平狐
2013/01/06
103
0
Android 国内应用市场的汇总

2010年在国内出现了Android系统智能机的大规模发展,而应用商城也在火拼起来,下面我推荐一下国内Android的免费软件商城。 应用汇 掌上应用汇是一款基于Android系统的本土化软件市场,掌上应...

鉴客
2012/03/09
478
0
Windows Phone 开发者必须知晓的10大问题

随着微软、诺基亚在本月内陆续完成 Windows Phone7.5 系统(Tango)和手机的中国上市计划,“是否要在 Windows Phone 平台上开发 APP?” 被越来越多的独立软件开发商和个人开发者提上了日程...

红薯
2012/03/23
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

Kafka再平衡机制详解

所谓的再平衡,指的是在kafka consumer所订阅的topic发生变化时发生的一种分区重分配机制。一般有三种情况会触发再平衡: consumer group中的新增或删除某个consumer,导致其所消费的分区需要...

爱宝贝丶
21分钟前
17
0
element 验证 请输入大于0的整数

data() { var validatePass = (rule, value, callback) => { // if (value <= 0) { // callback(new Error('请输入大于0的整数')); // } else { // c......

沉迷代码我爱学习
32分钟前
4
0
报表工具花钱or开源?我对比了这6个工具

近一年都在处理报表问题,调研了不少报表工具,也开发了适合公司业务的报表应用。分享一些关于如何选择报表工具的个人观点,希望对你有参考作用。 对于大部分企业来说,能花时间和人力去开发...

帆软
32分钟前
3
0
自建redis笔记--Redis cluster搭建

Redis cluster搭建 2018年十月 Redis 发布了稳定版本的 5.0 版本,推出了各种新特性,其中一点是放弃 Ruby的集群方式,改为 使用 C语言编写的 redis-cli的方式,是集群的构建方式复杂度大大降...

北极之北
32分钟前
3
0
分享一个在caffe中实现的yolo层

这是别人实现的,是我移植到cc的cpu实现,可以实现caffe中使用yolo3,但是我感觉实际效果不如darknet 好点 template <typename Dtype>inline Dtype sigmoid(Dtype x){return 1. / (1. ...

开飞色
34分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部