1.案例图片展示:
2.案例功能扫描:
1.ViewFlipper的页面切换功能,包括添加手势识别左右滑动切换,同时联动点击顶部选项卡切换;
2.动态组合RadioGroup与ViewFlipper实现选项卡Tab与content联动;
3.利用RadioButton实现顶部选项卡;
4.动画Animation的定义及实现,包括xml方式和java代码;
5.GestureDetector手势识别应用;
3.利用RadioButton实现顶部选项卡;
4.动画Animation的定义及实现,包括xml方式和java代码;
5.GestureDetector手势识别应用;
1.ViewFlipper控件的使用、
2.RadioGroup控件应用、
3.在代码中定义控件、
4.事件监听机制(onClickListener/OnTouchListener)、
5.Animation的使用(包含xml定义与java代码定义)、
6.GestureDetector的使用。
4.案例图片素材:一张整幅图片背景图片、一张RadioButton未选中时的图片,一张选中时的图片(格式为.9.png),一张RadioButton中间间隔的图片。
5.案例实现分析:
第一步:准备三个LayoutView,作为ViewFlipper的子View;
第二步:实现ViewFlipper这个主View的功能;
1.设计选项卡,通过RadioGroup与RadioButton来实现,需要学会如何在java中定义View的控件,包括设置LayoutParams参数与设置View控件属性;
2.实现ViewFlipper控件,并将三个LayoutView作为它的子View加进去;
3.给RadioGroup添加点击事件监控setOnCheckedChangeListener(),通过得到的RadioButton id来控制RadioButton点击状态显 示与ViewFlipper对应的 LayoutView显示;
3.给RadioGroup添加点击事件监控setOnCheckedChangeListener(),通过得到的RadioButton id来控制RadioButton点击状态显 示与ViewFlipper对应的 LayoutView显示;
4.给ViewFlipper添加左右移动动画Animation;
5.给ViewFlipper添加手势识别监听器,并设计其左右移动动画。
5.给ViewFlipper添加手势识别监听器,并设计其左右移动动画。
第三步:在Activity里面通过setContentView()方法将这个主View加进去。
6.案例代码实现:
作为内容View的类LayoutFirst
package com.javaee.main.layout;
import android.content.Context;
import android.view.Gravity;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class LayoutFirst extends RelativeLayout{
public LayoutFirst(Context context) {
super(context);
// TODO Auto-generated constructor stub
initLayout(context);
}
private void initLayout(Context context){
LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
TextView tv = new TextView(context);
tv.setText("LayoutA");
tv.setTextSize(28.0f);
tv.setGravity(Gravity.CENTER);
this.addView(tv, params);
}
}
类LayoutSecond:
package com.javaee.main.layout;
import android.content.Context;
import android.view.Gravity;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class LayoutSecond extends RelativeLayout{
public LayoutSecond(Context context) {
super(context);
// TODO Auto-generated constructor stub
initLayout(context);
}
private void initLayout(Context context){
LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
TextView tv = new TextView(context);
tv.setText("LayoutB");
tv.setTextSize(28.0f);
tv.setGravity(Gravity.CENTER);
this.addView(tv, params);
}
}
类LayoutThird
package com.javaee.main.layout;
import android.content.Context;
import android.view.Gravity;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class LayoutThird extends RelativeLayout{
public LayoutThird(Context context) {
super(context);
// TODO Auto-generated constructor stub
initLayout(context);
}
private void initLayout(Context context){
LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
TextView tv = new TextView(context);
tv.setText("LayoutC");
tv.setTextSize(28.0f);
tv.setGravity(Gravity.CENTER);
this.addView(tv, params);
}
}
package com.javaee.main.anim;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
public class AnimationHelper {
// 从右边出来滑动效果
public static Animation inFromRight() {
Animation inFRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFRight.setDuration(500);
inFRight.setInterpolator(new AccelerateInterpolator());
return inFRight;
}
// 从左边出来滑动效果
public static Animation inFromLeft() {
Animation inFLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, -1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
inFLeft.setDuration(500);
inFLeft.setInterpolator(new AccelerateInterpolator());
return inFLeft;
}
// 从左边出去效果
public static Animation outToLeft() {
Animation outToLeft = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, -1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outToLeft.setDuration(500);
outToLeft.setInterpolator(new AccelerateInterpolator());
return outToLeft;
}
// 从右边出去
public static Animation outToRight() {
Animation outTRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 1.0f,
Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f);
outTRight.setDuration(500);
outTRight.setInterpolator(new AccelerateInterpolator());
return outTRight;
}
}
package com.javaee.main.mainView;
import com.javaee.main.R;
import com.javaee.main.anim.AnimationHelper;
import com.javaee.main.layout.LayoutFirst;
import com.javaee.main.layout.LayoutSecond;
import com.javaee.main.layout.LayoutThird;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.BitmapDrawable;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.RelativeLayout;
import android.widget.ViewFlipper;
public class MyViewFlipper extends RelativeLayout {
private final static int ID_RADIO_GROUP = 0X0005;
private final static int ID_RADIO_BUTTON1 = 0X0008;
private final static int ID_RADIO_BUTTON2 = 0X0007;
private final static int ID_RADIO_BUTTON3 = 0X0006;
private RadioGroup rGroup;
private RadioButton bn_1;
private RadioButton bn_2;
private RadioButton bn_3;
private ViewFlipper flipper;
private LayoutFirst first;
private LayoutSecond second;
private LayoutThird third;
public MyViewFlipper(Context context) {
super(context);
// TODO Auto-generated constructor stub
initLayout(context);
}
// 初始化Layout
private void initLayout(final Context context) {
Bitmap bmnull = null;
// 设置View的背景
BitmapDrawable mDraw = new BitmapDrawable(getResources(),
BitmapFactory.decodeResource(getResources(),
R.drawable.browse_bg_tile));
mDraw.setTileModeXY(TileMode.REPEAT, TileMode.REPEAT);
this.setBackgroundDrawable(mDraw);
//创建RadioGroup
rGroup = new RadioGroup(context);
rGroup.setOrientation(CENTER_HORIZONTAL);
rGroup.setGravity(Gravity.CENTER_HORIZONTAL);
rGroup.setId(ID_RADIO_GROUP);
//创建RadioGroup的layout参数
LayoutParams gourpLParams = new LayoutParams(LayoutParams.FILL_PARENT, 55);
gourpLParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
this.addView(rGroup, gourpLParams);
//给RadioGroup添加监听器
rGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
checkedChange(checkedId);
}
});
//创建RadioButton
bn_1 = new RadioButton(context);
bn_1.setId(ID_RADIO_BUTTON1);
bn_1.setBackgroundResource(R.drawable.nav_inactive_tile);
bn_1.setButtonDrawable(new BitmapDrawable(bmnull));
bn_1.setText("Tab1");
bn_1.setTextColor(0xff839359);
bn_1.getPaint().setFakeBoldText(true);
bn_1.setGravity(Gravity.CENTER);
RadioGroup.LayoutParams buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
buttonParams.weight = 1;
rGroup.addView(bn_1, buttonParams);
//创建中间间隔ImageView
ImageView imageView = new ImageView(context);
imageView.setBackgroundResource(R.drawable.nav_divider);
buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rGroup.addView(imageView, buttonParams);
//创建第二个RadioButton
bn_2 = new RadioButton(context);
bn_2.setId(ID_RADIO_BUTTON2);
bn_2.setBackgroundResource(R.drawable.nav_inactive_tile);
bn_2.setButtonDrawable(new BitmapDrawable(bmnull));
bn_2.setText("Tab2");
bn_2.setTextColor(0xff839359);
bn_2.getPaint().setFakeBoldText(true);
bn_2.setGravity(Gravity.CENTER);
buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
buttonParams.weight = 1;
rGroup.addView(bn_2, buttonParams);
//中间间隔view
imageView = new ImageView(context);
imageView.setBackgroundResource(R.drawable.nav_divider);
buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rGroup.addView(imageView, buttonParams);
//第三个RadioButton
bn_3 = new RadioButton(context);
bn_3.setId(ID_RADIO_BUTTON3);
bn_3.setBackgroundResource(R.drawable.nav_inactive_tile);
bn_3.setButtonDrawable(new BitmapDrawable(bmnull));
bn_3.setText("Tab3");
bn_3.setTextColor(0xff839359);
bn_3.getPaint().setFakeBoldText(true);
bn_3.setGravity(Gravity.CENTER);
buttonParams = new RadioGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
buttonParams.weight = 1;
rGroup.addView(bn_3, buttonParams);
//创建flipper对象
flipper = new ViewFlipper(context);
flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.in_to_left));
flipper.setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.out_to_left));
flipper.setOnTouchListener(mOnTouchListener);
flipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES);
flipper.setFlipInterval(1000);
flipper.setClickable(true);
gourpLParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.MATCH_PARENT);
gourpLParams.addRule(RelativeLayout.BELOW, ID_RADIO_GROUP);
this.addView(flipper, gourpLParams);
first = new LayoutFirst(context);
second = new LayoutSecond(context);
third = new LayoutThird(context);
gourpLParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
flipper.addView(first, gourpLParams);
flipper.addView(second, gourpLParams);
flipper.addView(third, gourpLParams);
}
private OnTouchListener mOnTouchListener = new OnTouchListener(){
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
return mGestureDetector.onTouchEvent(event);
}
};
GestureDetector mGestureDetector = new GestureDetector(new OnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
// TODO Auto-generated method stub
return false;
}
@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
// TODO Auto-generated method stub
if(velocityX > 0){
System.out.println("左边-velocityX:" + velocityX);
rightNext();
} else {
System.out.println("右边-velocityX:" + velocityX);
leftNext();
}
return false;
}
@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
});
private void checkedChange(int id){
switch (id) {
case 0:
case ID_RADIO_BUTTON1:
flipper.setDisplayedChild(0);
bn_1.setBackgroundResource(R.drawable.nav_active_2options);
bn_2.setBackgroundResource(R.drawable.nav_inactive_tile);
bn_3.setBackgroundResource(R.drawable.nav_inactive_tile);
break;
case 1:
case ID_RADIO_BUTTON2:
flipper.setDisplayedChild(1);
bn_1.setBackgroundResource(R.drawable.nav_inactive_tile);
bn_2.setBackgroundResource(R.drawable.nav_active_2options);
bn_3.setBackgroundResource(R.drawable.nav_inactive_tile);
break;
case 2:
case ID_RADIO_BUTTON3:
flipper.setDisplayedChild(2);
bn_1.setBackgroundResource(R.drawable.nav_inactive_tile);
bn_2.setBackgroundResource(R.drawable.nav_inactive_tile);
bn_3.setBackgroundResource(R.drawable.nav_active_2options);
break;
}
}
private void leftNext(){
flipper.setInAnimation(AnimationHelper.inFromRight());
flipper.setOutAnimation(AnimationHelper.outToLeft());
flipper.showNext();
checkedChange(flipper.getDisplayedChild());
}
private void rightNext(){
flipper.setInAnimation(AnimationHelper.inFromLeft());
flipper.setOutAnimation(AnimationHelper.outToRight());
flipper.showPrevious();
checkedChange(flipper.getDisplayedChild());
}
}
package com.javaee.main;
import com.javaee.main.mainView.MyViewFlipper;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
MyViewFlipper flipper = new MyViewFlipper(this);
setContentView(flipper);
}
}