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

最新推荐文章于 2022-07-14 21:17:13 发布

蓝水依依

最新推荐文章于 2022-07-14 21:17:13 发布

阅读量1.2k

点赞数

分类专栏： android

android 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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

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

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

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

1.布局文件main.xml

先看代码：

[html] view plain copy

<?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方法中：

[java] view plain copy

@Override
ublic 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方法中处理。

[java] view plain copy

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中的全部代码：

[java] view plain copy

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;
}
}

工程代码下载：点击下载

蓝水依依

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android仿QQ主界面-------完善篇

在我前面的博文中，做出了仿QQ主界面的主要工作，博文地址：Android仿QQ主界面。但是在那一篇中还有一个不起眼的地方没做，今天就完善它。今天要实现在文字下面来个ImageView，实现动画。先看看效果图。在滑动页面的时候，下面的ImageView会滑动。好了，开始正题。1.布局文件main.xml先看代码：[html] view pla
复制链接

扫一扫

专栏目录