fragment與Viewpage實現滑動切換效果
顯示效果:
實現過程:
1.創建3個選項卡中的內容,即三個Fragment。
這里僅貼出其中一個:
Tab2:
package com.example.viewpagerdemo3;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
public class Tab2 extends Fragment
{
private Button but = null;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.tab2,null);//注意不要指定父視圖
but = (Button) view.findViewById(R.id.but);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState)
{
super.onActivityCreated(savedInstanceState);
but.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
Toast.makeText(Tab2.this.getActivity(),"hahah", 0).show();
}
});
}
}
布局:
剩下兩個Fragment類似。
2.主界面布局
三個TextView代表選項卡標題,ImageView代表選項卡下的下劃線。
3.實現activity。
package com.example.viewpagerdemo3;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends FragmentActivity
{
private ViewPager vPager = null;
/**
* 代表選項卡下的下劃線的imageview
*/
private ImageView cursor = null;
/**
* 選項卡下劃線長度
*/
private static int lineWidth = 0;
/**
* 偏移量
* (手機屏幕寬度/3-選項卡長度)/2
*/
private static int offset = 0;
/**
* 選項卡總數
*/
private static final int TAB_COUNT = 3;
/**
* 當前顯示的選項卡位置
*/
private int current_index = 0;
/**
* 選項卡標題
*/
private TextView text1,text2,text3;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vPager = (ViewPager) findViewById(R.id.vPager);
initImageView();
text1 = (TextView) findViewById(R.id.text1);
text2 = (TextView) findViewById(R.id.text2);
text3 = (TextView) findViewById(R.id.text3);
final TextView[] titles = {text1,text2,text3};
vPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager())
{
@Override
public int getCount()
{
return TAB_COUNT;
}
@Override
public Fragment getItem(int index)//直接創建fragment對象并返回
{
switch (index)
{
case 0:
return new Tab1();
case 1:
return new Tab2();
case 2:
return new Tab3();
}
return null;
}
});
vPager.setOnPageChangeListener(new OnPageChangeListener()
{
int one = offset * 2 + lineWidth;// 頁卡1 -> 頁卡2 偏移量
@Override
public void onPageSelected(int index)//設置標題的顏sè以及下劃線的移動效果
{
Animation animation = new TranslateAnimation(one*current_index,one*index, 0,0);
animation.setFillAfter(true);
animation.setDuration(300);
cursor.startAnimation(animation);
titles[current_index].setTextColor(Color.BLACK);
titles[index].setTextColor(Color.RED);
current_index = index;
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{
}
@Override
public void onPageScrollStateChanged(int index)
{
}
});
}
private void initImageView()
{
cursor = (ImageView) findViewById(R.id.cursor);
//獲取圖片寬度
lineWidth = BitmapFactory.decodeResource(getResources(),R.drawable.line).getWidth();
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
//獲取屏幕寬度
int screenWidth = dm.widthPixels;
Matrix matrix = new Matrix();
offset = (int) ((screenWidth/(float)TAB_COUNT - lineWidth)/2);
matrix.postTranslate(offset, 0);
//設置初始位置
cursor.setImageMatrix(matrix);
}
} 推薦文章
2025-01-18
2024-11-28
2024-11-09
2024-10-25
2024-06-25
2024-01-04
2023-11-06
2023-10-30
2023-10-13
2023-10-10
穩定
產品高可用性高并發貼心
項目群及時溝通專業
產品經理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質開發