Android仿QQ主界面-------完善篇

于 2012-12-04 09:20:45 发布
阅读量8k 收藏 16
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Android开发 文章标签： android Android qq QQ ui UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhy_cheng/article/details/8254140
本文详细介绍了如何在Android应用中模仿QQ主界面，通过在文字下方添加一个可滑动的ImageView，并实现动画效果。通过布局调整和Java代码实现，展示了在滑动页面时，下面的ImageView能够跟随滑动而移动的动态效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在我前面的博文中，做出了仿QQ主界面的主要工作，博文地址：Android仿QQ主界面。

 

但是在那一篇中还有一个不起眼的地方没做，今天就完善它。

 

今天要实现在文字下面来个ImageView，实现动画。先看看效果图。

 

在滑动页面的时候，下面的ImageView会滑动。好了，开始正题。

1.布局文件main.xml

先看代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#1685cc"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#1685cc" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="试题"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="原文"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="解答"
                android:textSize="25sp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="50dp"
            android:layout_height="6dp"
            android:layout_marginLeft="30dip"
            android:src="@drawable/meitu" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:background="#FF0000" />

</LinearLayout>


与上篇文章相比，在包含三个TextView的LinearLayout下面加了一个ImageView，用于显示图片。图片的宽和高以及左边距都是固定的。

2.功能实现的Java代码

加了三个成员变量，一个int类型的currentPage用于标示当前正在显示那个页面，一个int类型的disPlayWidth用于保存屏幕的宽度，还有一个int类型的offSet，这个变量标示的是一个宽度，下面作图说明：

 

offSet就是TextView控件的宽度减去图片的宽度除以2，如上图所示。

 

实现动画的原理就是当当前的界面发生改变就实现动画。界面的改变有两个来源

1.用户点击上面的TextView

2.用户滑动界面

我必须对这两种的改变都做出反应。

 

1.对TextView的点击做出反应在TextView的onClick方法中：

         @Override
	public void onClick(View v) {
		int single=b.getWidth()+offSet*2;
		
		if(v.getId()==R.id.textView1)
		{
			
			vp.setCurrentItem(0);
			if(currentPage!=0)
			{
				TranslateAnimation ta=new TranslateAnimation(currentPage*single,0,0,0);
				ta.setFillAfter(true);
				ta.setDuration(200);
				i.startAnimation(ta);
			}
			currentPage=0;
		}
		if(v.getId()==R.id.textView2)
		{
			vp.setCurrentItem(1);
			if(currentPage!=1)
			{
				TranslateAnimation ta=new TranslateAnimation(currentPage*single,single,0,0);
				ta.setFillAfter(true);
				ta.setDuration(200);
				i.startAnimation(ta);
			}
			currentPage=1;
		}
		if(v.getId()==R.id.textView3)
		{
			vp.setCurrentItem(2);
			if(currentPage!=2)
			{
				TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*2,0,0);
				ta.setFillAfter(true);
				ta.setDuration(200);
				i.startAnimation(ta);
			}
			currentPage=2;
		}
		
		
	}


 

在这里，变量single表示移动一次的长度，从图中可以看出是图片的宽度加上offSet*2，这表示这个长度就是一个TextView的宽度。在这里为什么不获取TextView的宽度呢？原因是TextView与TextView之间是有宽度的，直接使用TextView的宽度的话不准。然后判断是哪一个TextView被点击了，再设置当前的界面，接着实现动画。如果点击的是当前的页面则不用实现动画，如果点击的页面不是当前的页面则从当前页面移动到指定的页面。TranslateAnimation动画的前两个参数是X方向的移动。动画完成后ImageView要停在最后的地点，所以要设置setFillAfter为true。

2.用户滑动界面时的反应

用户滑动界面的方法要对ViewPager设置监听，在onPageSelected方法中处理。

public void onPageSelected(int arg0) {
		int single=b.getWidth()+offSet*2;
		TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*arg0,0,0);
		ta.setFillAfter(true);
		ta.setDuration(200);
		i.startAnimation(ta);
		
		
		currentPage=arg0;
		
	}


在这个方法中的arg0是滑动之后的那个界面的标示。这里的代码与上面的差不多，还是实现一个动画。

 

 

 

下面贴出ViewPagerWorkActivity中的全部代码：

package com.zhycheng.viewpagerwork;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

public class ViewPagerWorkActivity extends Activity implements OnClickListener, OnPageChangeListener {
	TextView tv1,tv2,tv3;
	int currentPage=0;
	ViewPager vp;
	ArrayList al;
	Bitmap b;
	ImageView i;
	int disPlayWidth,offSet;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        i=(ImageView) findViewById(R.id.imageView1);
        Display dis=this.getWindowManager().getDefaultDisplay();
        disPlayWidth=dis.getWidth();
        b=BitmapFactory.decodeResource(this.getResources(),R.drawable.meitu);
        offSet=(disPlayWidth/3-b.getWidth())/2;
        tv1=(TextView) findViewById(R.id.textView1);
        tv2=(TextView) findViewById(R.id.textView2);
        tv3=(TextView) findViewById(R.id.textView3);
        vp=(ViewPager) findViewById(R.id.viewpager);
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);
        al=new ArrayList();
        LayoutInflater li=LayoutInflater.from(this);
        al.add(li.inflate(R.layout.zyc1, null));
        al.add(li.inflate(R.layout.zyc2, null));
        al.add(li.inflate(R.layout.zyc3, null));
        PagerAdapter pa=new PagerAdapter(){

			@Override
			public void destroyItem(View arg0, int arg1, Object arg2) {
				// TODO Auto-generated method stub
				((ViewPager)arg0).removeView((View)al.get(arg1));
				
			}

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

			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return al.size();
			}

			@Override
			public Object instantiateItem(View arg0, int arg1) {
				((ViewPager)arg0).addView((View)al.get(arg1), 0);
				return (View)al.get(arg1);
			}

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0==arg1;
			}

			@Override
			public void restoreState(Parcelable arg0, ClassLoader arg1) {
				// TODO Auto-generated method stub
				
			}

			@Override
			public Parcelable saveState() {
				// TODO Auto-generated method stub
				return null;
			}

			@Override
			public void startUpdate(View arg0) {
				// TODO Auto-generated method stub
				
			}};
        vp.setAdapter(pa);
        vp.setCurrentItem(0);
		vp.setOnPageChangeListener(this);
        
    }
	@Override
	public void onClick(View v) {
		int single=b.getWidth()+offSet*2;
		
		if(v.getId()==R.id.textView1)
		{
			
			vp.setCurrentItem(0);
			if(currentPage!=0)
			{
				TranslateAnimation ta=new TranslateAnimation(currentPage*single,0,0,0);
				ta.setFillAfter(true);
				ta.setDuration(200);
				i.startAnimation(ta);
			}
			currentPage=0;
		}
		if(v.getId()==R.id.textView2)
		{
			vp.setCurrentItem(1);
			if(currentPage!=1)
			{
				TranslateAnimation ta=new TranslateAnimation(currentPage*single,single,0,0);
				ta.setFillAfter(true);
				ta.setDuration(200);
				i.startAnimation(ta);
			}
			currentPage=1;
		}
		if(v.getId()==R.id.textView3)
		{
			vp.setCurrentItem(2);
			if(currentPage!=2)
			{
				TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*2,0,0);
				ta.setFillAfter(true);
				ta.setDuration(200);
				i.startAnimation(ta);
			}
			currentPage=2;
		}
		
		
	}
	@Override
	public void onPageScrollStateChanged(int arg0) {
		
	}
	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		
	}
	@Override
	public void onPageSelected(int arg0) {
		int single=b.getWidth()+offSet*2;
		TranslateAnimation ta=new TranslateAnimation(currentPage*single,single*arg0,0,0);
		ta.setFillAfter(true);
		ta.setDuration(200);
		i.startAnimation(ta);
		
		
		currentPage=arg0;
		
	}
}


工程代码下载：点击下载

 

 

评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值