-
1.布局
布局这里采用了2个ImageVIew来实现5个按钮的点击轮播，由ViewFlipper控制。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<ViewFlipper
android:id="@+id/vflp_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<ImageView
android:id="@+id/page_help_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tu1" />
<ImageView
android:id="@+id/page_help_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tu2" />
</ViewFlipper>
<LinearLayout
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="50dp"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/button0"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="0" />
<Button
android:id="@+id/button1"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_below="@+id/button1"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="3" />
<Button
android:id="@+id/button4"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="4" />
</LinearLayout>
</LinearLayout>
- 2.Java代码
该程序采取方向固定的写法，如果想往前轮播的话，可以使用mViewFlipper.showPrevious()方法实现，但是需要将动画进行改变。
public class MainActivity extends AppCompatActivity {
private int[]image =new int[]{R.drawable.tu1, R.drawable.tu2, R.drawable.tu3, R.drawable.tu4,
R.drawable.tu5};
private ViewFlippermViewFlipper;
private int lastFocusPosition;
@Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main6);
final Button button0 = findViewById(R.id.button0);
final Button button1 = findViewById(R.id.button1);
final Button button2 = findViewById(R.id.button2);
final Button button3 = findViewById(R.id.button3);
final Button button4 = findViewById(R.id.button4);
mViewFlipper = (ViewFlipper) findViewById(R.id.vflp_help);
//按键事件
button0.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
switchImage(0);
}
});
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
switchImage(1);
}
});
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
switchImage(2);
}
});
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
switchImage(3);
}
});
button4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
switchImage(4);
}
});
}
public void switchImage(int index) {
if (lastFocusPosition == index) {
return;
}
lastFocusPosition = index;
if (mViewFlipper.getDisplayedChild() == 0) {
//如果当前显示的控件为第1个，就改变即将切换进来的第2个控件
((ImageView) mViewFlipper.getChildAt(1)).setImageResource(image[index]);
} else {
//如果当前显示的控件为第2个，就改变即将切换进来的第1个控件
((ImageView) mViewFlipper.getChildAt(0)).setImageResource(image[index]);
}
//下一张进来的动画
mViewFlipper.setInAnimation(MainActivity.this, R.anim.left_in);
//当前页面消息的动画
mViewFlipper.setOutAnimation(MainActivity.this, R.anim.left_out);
//下一张
mViewFlipper.showNext();
}
}
-
3.动画
往后轮播动画：
left_in:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p" android:toXDelta="0"
android:duration="3000"/>
</set>
left_out:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="-100%p"
android:duration="3000"/>
</set>
往前轮播动画：
right_in:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="0"
android:duration="3000"/>
</set>
right_out：
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="3000"/>
</set>
往上轮播动画：
up_in
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%p" android:toYDelta="0"
android:duration="3000"/>
</set>
up_out:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0" android:toYDelta="-100%p"
android:duration="3000"/>
</set>
往下轮播动画：
down_in:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%p" android:toYDelta="0"
android:duration="3000"/>
</set>
down_out：
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0" android:toYDelta="100%p"
android:duration="3000"/>
</set>
该程序可以实现点击切换图片，如果希望自动轮播可将点击事件里的代码加至定时动画里即可。
网友评论