选卡切换+侧滑

参考了鸿神写的，做了小小的修改，记录一下，勿喷，开始上代码啦

package com.example.cyhtest;import java.util.ArrayList;import com.example.fragment.BarFragment;import com.example.fragment.FourFragment;import com.example.fragment.OneFragment;import com.example.fragment.FragmentSum;import com.example.fragment.ThreeFragment;import com.example.fragment.TwoFragment;import android.graphics.BitmapFactory;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.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.View;import android.view.View.OnClickListener;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 viewPager;// 页卡内容private ImageView imageView;// 动画图片private TextView textView1, textView2, textView3, textView4;private ArrayList<Fragment> fragmentsList;private int offset = 0;// 动画图片偏移量private int currIndex = 0;// 当前页卡编号private int bmpW;// 动画图片宽度private OneFragment tecInfroFragment;private TwoFragment courseReqFragment;private ThreeFragment courseContentFragment;private FourFragment placeTimeFragment;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);/** * 第一种 *  */// setContentView(R.layout.activity_main);// InitImageView();// InitTextView();// InitViewPager();/** * 第二种 */// setContentView(R.layout.main);// initFragment();/** * 第三种：在第二种情况下添加侧滑 *  */setContentView(R.layout.aaaa);initFirstFragment();initSecondFragment();}//第二种情况private void initFragment(){FragmentManager fm = getSupportFragmentManager();FragmentTransaction ft = fm.beginTransaction();FragmentSum mFragmentSum = new FragmentSum();ft.add(R.id.fl_content, mFragmentSum);ft.commit();}// 第三种情况private void initSecondFragment() {FragmentManager fm = getSupportFragmentManager();FragmentTransaction ft = fm.beginTransaction();FragmentSum mFragmentSum = new FragmentSum();ft.add(R.id.fl_secondbar, mFragmentSum);ft.commit();}// 第三种情况private void initFirstFragment() {FragmentManager fm = getSupportFragmentManager();FragmentTransaction ft = fm.beginTransaction();BarFragment mBarFragment = new BarFragment();ft.add(R.id.fl_firstbar, mBarFragment);ft.commit();}/** * 初始化头标 */private void InitTextView() {textView1 = (TextView) findViewById(R.id.text1);textView2 = (TextView) findViewById(R.id.text2);textView3 = (TextView) findViewById(R.id.text3);textView4 = (TextView) findViewById(R.id.text4);textView1.setOnClickListener(new MyOnClickListener(0));textView2.setOnClickListener(new MyOnClickListener(1));textView3.setOnClickListener(new MyOnClickListener(2));textView4.setOnClickListener(new MyOnClickListener(3));}/** * 2 * 初始化动画，这个就是页卡滑动时，下面的横线也滑动的效果，在这里需要计算一些数据 */private void InitImageView() {imageView = (ImageView) findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.line).getWidth();// 获取图片宽度DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);int screenW = dm.widthPixels;// 获取分辨率宽度offset = (screenW / 4 - bmpW) / 2;// 计算偏移量Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);imageView.setImageMatrix(matrix);// 设置动画初始位置}private void InitViewPager() {viewPager = (ViewPager) findViewById(R.id.viewpager);fragmentsList = new ArrayList<Fragment>();tecInfroFragment = new OneFragment();courseReqFragment = new TwoFragment();courseContentFragment = new ThreeFragment();placeTimeFragment = new FourFragment();fragmentsList.add(tecInfroFragment);fragmentsList.add(courseReqFragment);fragmentsList.add(courseContentFragment);fragmentsList.add(placeTimeFragment);viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList));viewPager.setCurrentItem(0);// 若不设置这个，标题下边的线不会随着页卡滑动而滑动viewPager.setOnPageChangeListener(new MyOnPageChangeListener());}public class MyFragmentPagerAdapter extends FragmentPagerAdapter {private ArrayList<Fragment> fragmentsList;public MyFragmentPagerAdapter(FragmentManager fm) {super(fm);}public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragments) {super(fm);this.fragmentsList = fragments;}@Overridepublic int getCount() {return fragmentsList.size();}@Overridepublic Fragment getItem(int arg0) {return fragmentsList.get(arg0);}@Overridepublic int getItemPosition(Object object) {return super.getItemPosition(object);}}/** *  * 头标点击监听 3 */private class MyOnClickListener implements OnClickListener {private int index = 0;public MyOnClickListener(int i) {index = i;}public void onClick(View v) {viewPager.setCurrentItem(index);}}public class MyOnPageChangeListener implements OnPageChangeListener {int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量int two = one * 2;// 页卡1 -> 页卡3 偏移量public void onPageScrollStateChanged(int arg0) {// arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做，就是停在那。}public void onPageScrolled(int arg0, float arg1, int arg2) {// 默示在前一个页面滑动到后一个页面的时辰，在前一个页面滑动前调用的办法。}public void onPageSelected(int arg0) {// arg0是默示你当前选中的页面，这事务是在你页面跳转完毕的时辰调用的。Animation animation = new TranslateAnimation(one * currIndex, one* arg0, 0, 0);// 显然这个比较简洁，只有一行代码。currIndex = arg0;animation.setFillAfter(true);// True:图片停在动画结束位置animation.setDuration(300);imageView.startAnimation(animation);}}}

还有一些fragemnt

package com.example.fragment;import com.example.cyhtest.R;import com.example.view.SlidingMenu;import com.example.view.TitleBarView;import android.content.Context;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.widget.Button;public class BarFragment extends Fragment {private static final String TAG = "BarFragment";private Context mContext;private View mBaseView;// 定义标题栏弹窗按钮private TitleBarView mTitleBarView;private Button mButton;// 定义左侧滑private SlidingMenu mLeftMenu;private View mSlideView;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {mContext = getActivity();mBaseView = inflater.inflate(R.layout.fragment_main_father, null);// titlebar左中右mSlideView = inflater.inflate(R.layout.aaaa, null);// 侧滑findTitleBarView();initTitleBarView();return mBaseView;}private void findTitleBarView() {// 右边的popmTitleBarView = (TitleBarView) mBaseView.findViewById(R.id.title_bar);mButton = (Button) mBaseView.findViewById(R.id.title_btn_right);// 左边的slidemLeftMenu = (SlidingMenu) mSlideView.findViewById(R.id.id_menu);}private void initTitleBarView() {mTitleBarView.setCommonTitle(View.VISIBLE, View.GONE, View.GONE);mTitleBarView.setBtnTitleLeft(R.drawable.slide_menu);mTitleBarView.setBtnTitleLeftOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {mLeftMenu.toggle();// 切换}});}}

4个差不多的fragment,贴一个出来

package com.example.fragment;import com.example.cyhtest.R;import com.example.cyhtest.R.layout;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class OneFragment extends Fragment {private View mBaseView;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {mBaseView=inflater.inflate(R.layout.fragment_one, container, false);return mBaseView;}}

SystemMethod：

package com.example.util;import android.content.Context;public class SystemMethod {/** * 将dip转为px *  * @param dip * @return */public static int dip2px(Context context, float dipValue) {float scale = context.getResources().getDisplayMetrics().density;return (int) (dipValue * scale + 0.5f);}/** * 将px转为dip *  * @param px * @return */public static int px2dip(Context context, float pxValue) {float scale = context.getResources().getDisplayMetrics().density;return (int) (pxValue / scale + 0.5f);}/** * 获取屏幕的宽度 px *  * @return */public static int getScreenWidth(Context context) {return context.getResources().getDisplayMetrics().widthPixels;}/** * 获取屏幕高度px *  * @return */public static int getScreenHeight(Context context) {return context.getResources().getDisplayMetrics().heightPixels;}// 获取屏幕宽度// public static int getScreenWidth(Context context) {// DisplayMetrics dm = new DisplayMetrics();// ((Activity) context).getWindowManager().getDefaultDisplay()// .getMetrics(dm);// return dm.widthPixels;// }}

自定义SlidingMenu，代码如下：

package com.example.view;import android.content.Context;import android.content.res.TypedArray;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.MotionEvent;import android.view.ViewGroup;import android.view.WindowManager;import android.widget.HorizontalScrollView;import android.widget.LinearLayout;import com.example.cyhtest.R;import com.nineoldandroids.view.ViewHelper;public class SlidingMenu extends HorizontalScrollView {SlidingMenu slidingMenu;private LinearLayout mWapper;private ViewGroup mMenu;private ViewGroup mContent;private int mScreenWidth;private int mMenuWidth;private int mMenuRightPadding = 138;// dpprivate boolean once;private boolean isOpen;static Handler os = null;// static，因为static是主线程初始化的，不属于对象/** * 未使用自定义属性时，调用 *  * @param context * @param attrs */public SlidingMenu(Context context, AttributeSet attrs) {this(context, attrs, 0);slidingMenu = this;}/** * 当使用了自定义属性时，会调用此构造方法 *  * @param context * @param attrs * @param defStyle */public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);// 获取我们定义的属性TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SlidingMenu, defStyle, 0);int n = a.getIndexCount();for (int i = 0; i < n; i++) {int attr = a.getIndex(i);switch (attr) {case R.styleable.SlidingMenu_rightPadding:mMenuRightPadding = a.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));break;}}a.recycle();WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = new DisplayMetrics();wm.getDefaultDisplay().getMetrics(outMetrics);mScreenWidth = outMetrics.widthPixels;}public SlidingMenu(Context context) {this(context, null);}/** * 设置子View的宽和高 设置自己的宽和高 */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {if (!once) {mWapper = (LinearLayout) getChildAt(0);mMenu = (ViewGroup) mWapper.getChildAt(0);mContent = (ViewGroup) mWapper.getChildAt(1);mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth- mMenuRightPadding;mContent.getLayoutParams().width = mScreenWidth;once = true;}if (os == null)os = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what) {case 0:slidingMenu.smoothScrollTo(0, 0);break;case 1:slidingMenu.smoothScrollTo(mMenuWidth, 0);}}};super.onMeasure(widthMeasureSpec, heightMeasureSpec);}/** * 通过设置偏移量，将menu隐藏 */@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);if (changed) {this.scrollTo(mMenuWidth, 0);}}@Overridepublic boolean onTouchEvent(MotionEvent ev) {int action = ev.getAction();switch (action) {case MotionEvent.ACTION_UP:// 隐藏在左边的宽度int scrollX = getScrollX();if (scrollX >= mMenuWidth / 2) {this.smoothScrollTo(mMenuWidth, 0);isOpen = false;} else {this.smoothScrollTo(0, 0);isOpen = true;}return true;}return super.onTouchEvent(ev);}/** * 打开菜单 */public void openMenu() {if (isOpen)return;// this.smoothScrollTo(0, 0);os.sendEmptyMessage(0);isOpen = true;}public void closeMenu() {if (!isOpen)return;// this.smoothScrollTo(mMenuWidth, 0);os.sendEmptyMessage(1);isOpen = false;}/** * 切换菜单 */public void toggle() {if (isOpen) {closeMenu();} else {openMenu();}}/** * 滚动发生时 */@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);float scale = l * 1.0f / mMenuWidth; // 1 ~ 0/** * 区别1：内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale *  * 区别2：菜单的偏移量需要修改 *  * 区别3：菜单的显示时有缩放以及透明度变化 缩放：0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0 0.6+ * 0.4 * (1- scale) ; *  */float rightScale = 0.7f + 0.3f * scale;float leftScale = 1.0f - scale * 0.3f;float leftAlpha = 0.6f + 0.4f * (1 - scale);// 调用属性动画，设置TranslationXViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f);ViewHelper.setScaleX(mMenu, leftScale);ViewHelper.setScaleY(mMenu, leftScale);ViewHelper.setAlpha(mMenu, leftAlpha);// 设置content的缩放的中心点// ViewHelper.setPivotX(mContent, 0);// ViewHelper.setPivotY(mContent, mContent.getHeight()/2);// ViewHelper.setScaleX(mContent, rightScale);// ViewHelper.setScaleY(mContent, rightScale);}}

自定义TitleBarView：

package com.example.view;import com.example.cyhtest.R;import com.example.util.SystemMethod;import android.content.Context;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.LayoutInflater;import android.widget.Button;import android.widget.RelativeLayout;import android.widget.TextView;public class TitleBarView extends RelativeLayout {private static final String TAG = "TitleBarView";private Context mContext;private Button btn_titleLeft;private Button btn_titleRight;private TextView tv_center;public TitleBarView(Context context) {super(context);mContext = context;initView();}public TitleBarView(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;initView();}private void initView() {LayoutInflater.from(mContext).inflate(R.layout.common_title_bar, this);btn_titleLeft = (Button) findViewById(R.id.title_btn_left);btn_titleRight = (Button) findViewById(R.id.title_btn_right);tv_center = (TextView) findViewById(R.id.title_txt);}public void setCommonTitle(int leftVisibility, int centerVisibility,int rightVisibility) {btn_titleLeft.setVisibility(leftVisibility);btn_titleRight.setVisibility(rightVisibility);tv_center.setVisibility(centerVisibility);}public void setLeftTitle(int leftVisibility) {btn_titleLeft.setVisibility(leftVisibility);}public void setCenterTitle(int centerVisibility) {tv_center.setVisibility(centerVisibility);}public void setBtnTitleLeft(int icon) {Drawable img = mContext.getResources().getDrawable(icon);int height = SystemMethod.px2dip(mContext, 80);// 图像是50*45px,转化为dipint width = img.getIntrinsicWidth() * height / img.getIntrinsicHeight();img.setBounds(0, 0, width, height);btn_titleLeft.setCompoundDrawables(img, null, null, null);}public void setBtnTitleRight(int icon) {Drawable img = mContext.getResources().getDrawable(icon);int height = SystemMethod.px2dip(mContext, 80);// 图像是46*42px,转化为dipint width = img.getIntrinsicWidth() * height / img.getIntrinsicHeight();img.setBounds(0, 0, width, height);btn_titleRight.setCompoundDrawables(img, null, null, null);}public void setTitle(int resid) {tv_center.setText(resid);}public void setBtnTitleLeftOnClickListener(OnClickListener listener) {btn_titleLeft.setOnClickListener(listener);}public void setBtnTitleRightOnClickListener(OnClickListener listener) {btn_titleRight.setOnClickListener(listener);}public Button getTitleLeft() {return btn_titleLeft;}public Button getTitleRight() {return btn_titleRight;}public void destoryView() {btn_titleLeft.setText(null);btn_titleRight.setText(null);tv_center.setText(null);}}

属性自定义卡：attr.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="rightPadding" format="dimension"></attr>    <declare-styleable name="SlidingMenu">        <attr name="rightPadding"></attr>    </declare-styleable></resources>

参考的鸿神：侧滑：Android 自定义控件打造史上最简单的侧滑菜单

效果截图git：

对了代码下载地址是：http://download.csdn.net/detail/u010343650/9402001