一.360界面的实现:
看了别人的源码从而又完善了一下,这种界面实现起来还是不麻烦的(要源码的留下邮箱,我给你们发)。
效果图:
主界面:
public class MainActivity extends Activity {
private ImageView ivOne;
private ImageView ivTwo;
private ImageView button1;
private ImageView button2;
private ImageView button3;
private ImageView button4;
/*
* AccelerateInterpolator 在动画开始的时候速率改变比较慢,然后开始加速 BounceInterpolator
* 动画结束的时候弹起 DecelerateInterpolator 在动画开始的时候快,然后变慢 。。。
*/
// 动画加速
private Interpolator accelerator = new AccelerateInterpolator();
// 动画减速
private Interpolator decelerator = new DecelerateInterpolator();
private ViewPager vpMain;
private List<View> views;
private View viewOne;
private View viewTwo;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setView();
initView();
setListener();
}
public void setView() {
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
public void initView() {
// 页数按钮
ivOne = (ImageView) findViewById(R.id.viewpager_one);
ivTwo = (ImageView) findViewById(R.id.viewpager_two);
button1 = (ImageView) findViewById(R.id.button1);
button2 = (ImageView) findViewById(R.id.button2);
button3 = (ImageView) findViewById(R.id.button3);
button4 = (ImageView) findViewById(R.id.button4);
// ViewPager
vpMain = (ViewPager) findViewById(R.id.viewpager_main);
views = new ArrayList<View>();
viewOne = View.inflate(this, R.layout.activity_main_one, null);
views.add(viewOne);
viewTwo = View.inflate(this, R.layout.activity_mian_two, null);
views.add(viewTwo);
MyAdapter adapter = new MyAdapter();
MyListener listener = new MyListener();
vpMain.setAdapter(adapter);
// 监听滑动
vpMain.setOnPageChangeListener(listener);
LinearLayout activity_main_one_layout = (LinearLayout)viewOne.findViewById(R.id.activity_main_one_layout);
for (int i = 0; i < activity_main_one_layout.getChildCount(); i++) {
for(int j = 0 ;j < ((LinearLayout)activity_main_one_layout.getChildAt(i)).getChildCount() ; j++){
final int ii = i;
final int jj = j;
((LinearLayout)activity_main_one_layout.getChildAt(i)).getChildAt(j).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
Toast.makeText(MainActivity.this, "第"+ii+"行,第"+jj+"个", Toast.LENGTH_SHORT).show();
}
});
}
}
}
public void setListener() {
ivOne.setOnClickListener(new ImageViewOnClickListener());
ivTwo.setOnClickListener(new ImageViewOnClickListener());
button1.setOnClickListener(new ImageViewOnClickListener());
button2.setOnClickListener(new ImageViewOnClickListener());
button3.setOnClickListener(new ImageViewOnClickListener());
button4.setOnClickListener(new ImageViewOnClickListener());
}
// 点击ImageView,两个页面的切换方法
private void flipit(View one, View two) {
final View visible;
final View invisible;
// 判断两个view那个是隐藏的,然后切换
if (one.getVisibility() == View.GONE) {
visible = two;
invisible = one;
} else {
invisible = two;
visible = one;
}
// 设置动画,以X轴旋转
ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visible,
"rotationX", 0f, 90f);
// 设置时间
visToInvis.setDuration(500);
// 设置动画变化速率
visToInvis.setInterpolator(accelerator);
final ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisible,
"rotationX", -90f, 0f);
invisToVis.setDuration(500);
invisToVis.setInterpolator(decelerator);
visToInvis.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator anim) {
visible.setVisibility(View.GONE);
invisToVis.start();
invisible.setVisibility(View.VISIBLE);
}
});
visToInvis.start();
}
//适配器
class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}
}
//滑动监听
class MyListener implements OnPageChangeListener {
// 手指操作屏幕的时候发生变化
@Override
public void onPageScrollStateChanged(int arg0) {
}
// 在屏幕滚动过程中不断被调用
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
// 手指滑动翻页的时候,滑动的距离够长,手指抬起来就会立即执行这个方法,arg0是页数
@Override
public void onPageSelected(int arg0) {
flipit(ivOne, ivTwo);
}
}
//ImageView监听
class ImageViewOnClickListener implements View.OnClickListener {
@Override
public void onClick(View arg0) {
switch (arg0.getId()) {
case R.id.button1:
Toast.makeText(MainActivity.this, "我要下载", Toast.LENGTH_SHORT)
.show();
break;
case R.id.button2:
Toast.makeText(MainActivity.this, "我要删除", Toast.LENGTH_SHORT)
.show();
break;
case R.id.button3:
Toast.makeText(MainActivity.this, "我要设置", Toast.LENGTH_SHORT)
.show();
break;
case R.id.button4:
Toast.makeText(MainActivity.this, "我要添加", Toast.LENGTH_SHORT)
.show();
break;
case R.id.viewpager_one:
flipit(ivOne, ivTwo);
//setCurrentItem选中页数,getCurrentItem返回当前页数
vpMain.setCurrentItem((vpMain.getCurrentItem() + 1) % views.size());
break;
case R.id.viewpager_two:
flipit(ivOne, ivTwo);
vpMain.setCurrentItem((vpMain.getCurrentItem() + 1) % views.size());
break;
}
}
}
}
主界面布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/w6" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical"
android:layout_margin="10dp"
android:paddingLeft="5dp" >
<LinearLayout
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="8dp"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="哈哈哈哈"
android:textColor="#aaffffff"
android:textScaleX="1.2"
android:textSize="20sp" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈哈哈哈哈哈"
android:textColor="#88ffffff"
android:textSize="15sp" >
</TextView>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:paddingBottom="30dp"
android:paddingRight="5dp"
android:paddingTop="60dp" >
<include
android:id="@+id/main_sb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="@layout/activity_main_left" />
<ImageView
android:id="@+id/viewpager_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/rootblock_main_page_one"
/>
<ImageView
android:id="@+id/viewpager_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/rootblock_main_page_two"
android:visibility="gone" />
</RelativeLayout>
</RelativeLayout>
左布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/button1"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="@drawable/rootblock_icon_download_bg" />
<ImageView
android:id="@+id/button2"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/rootblock_icon_clear_bg" />
<ImageView
android:id="@+id/button3"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/rootblock_icon_set_bg" />
<ImageView
android:id="@+id/button4"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/rootblock_icon_add_bg" />
</LinearLayout>
第一页view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:orientation="vertical"
android:id="@+id/activity_main_one_layout" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#000000">
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#000000" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#3399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#3399ff" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#3399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#3399ff" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#953399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#953399ff" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
第二页view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="30dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#FF7F24" >
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#FF7F24" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#3399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#3399ff" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#3399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#3399ff" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:background="#953399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="110dp"
android:layout_height="80dp"
android:layout_marginLeft="5dp"
android:background="#953399ff" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="@drawable/rootblock_icon_add"></item>
<item android:state_pressed="true" android:drawable="@drawable/rootblock_icon_add_selected"></item>
<item android:state_enabled="true" android:drawable="@drawable/rootblock_icon_add"></item>
</selector>
另外三个xml一样。