小編給大家分享一下Android如何實(shí)現(xiàn)界面內(nèi)嵌多種卡片視圖，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù)，主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站制作，成都App定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。創(chuàng)新互聯(lián)深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

Android實(shí)現(xiàn)界面內(nèi)嵌多種卡片視圖，具體內(nèi)容如下

效果如圖所示：

1.選擇某個(gè)界面時(shí)，對(duì)應(yīng)的第幾個(gè)小圓點(diǎn)亮：

通過selector制造圓點(diǎn)和進(jìn)行更改小圓點(diǎn)被選擇和未被選擇時(shí)的顏色：

2.主界面布局：

3.主界面內(nèi)嵌的卡片視圖布局：

4.定義卡片之間切換的樣式：

/**
 * 卡片之間切換的樣式
 */

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {

 public static final float MAX_SCALE = 0.9f;
 public static final float MIN_SCALE = 0.8f;

 @Override
 public void transformPage(View page, float position) {

 position = position < -1 ? -1 : position;
 position = position > 1 ? 1 : position;

 float tempScale = position < 0 ? 1 + position : 1 - position;

 float slope = (MAX_SCALE - MIN_SCALE) / 1;
 float scaleValue = MIN_SCALE + tempScale * slope;
 page.setScaleX(scaleValue);
 page.setScaleY(scaleValue);
 if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
 page.getParent().requestLayout();
 }
 }
}

5.定義用于加載卡片視圖的layout控件，方便自定義寬高比例：

import android.content.Context;
import android.content.res.TypedArray;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

/**
 * 用于加載卡片視圖
 */

public class RatioLayout extends ViewGroup {

 private float heightWidthRatio = 0.325f;

 public RatioLayout(Context context) {
 this(context, null);
 }

 public RatioLayout(Context context, AttributeSet attrs) {
 super(context, attrs);

 final TypedArray a = context.obtainStyledAttributes(
 attrs, R.styleable.RatioLayout);
 heightWidthRatio = getFloatFromString(a.getString(R.styleable.RatioLayout_height_width_ratio));
 a.recycle();
 }

 public void setHeightWidthRatio(String ratio) {
 heightWidthRatio = getFloatFromString(ratio);
 }

 public static float getFloatFromString(String src) {
 if (TextUtils.isEmpty(src)) {
 return 0;
 }
 float result;
 try {
 result = Float.parseFloat(src);
 return result;
 } catch (Exception e) {
 }

 String[] strs = src.split("/");
 if (strs.length == 2) {
 try {
 float molecular = Float.parseFloat(strs[0]);//分子
 float denominator = Float.parseFloat(strs[1]);//分子
 result = molecular / denominator;
 } catch (Exception e) {
 result = 0;
 }
 } else {
 result = 0;
 }
 return result;
 }

 protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
 layoutChildren(left, top, right, bottom);
 }

 void layoutChildren(int left, int top, int right, int bottom) {
 final int count = getChildCount();
 for (int i = 0; i < count; i++) {
 final View child = getChildAt(i);
 if (child.getVisibility() != GONE) {
 final LayoutParams lp = child.getLayoutParams();
 final int width = child.getMeasuredWidth();
 final int height = child.getMeasuredHeight();
 child.layout(0, 0, width, 0 + height);
 }
 }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 if (heightWidthRatio > 0) {
 int width = getMeasuredWidth();
 int height = (int) (width * heightWidthRatio);
 setMeasuredDimension(width, height);
 int count = getChildCount();
 if (count >= 1) {
 for (int i = 0; i < count; i++) {
  View child = getChildAt(i);
  child.measure(MeasureSpec.makeMeasureSpec(getMeasuredWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(getMeasuredHeight(), MeasureSpec.EXACTLY));
 }
 }
 }
 }
}

6.卡片布局對(duì)應(yīng)的activity：

public class FrHealthChart extends Fragment {

 public static final String DATA = "_data";
 @BindView(R.id.layout_data1)
 LinearLayout layoutData1;
 @BindView(R.id.layout_data2)
 LinearLayout layoutData2;
 @BindView(R.id.layout_data3)
 LinearLayout layoutData3;
 @BindView(R.id.tv_title)
 TextView tvTitle;
 @BindView(R.id.chart_bar)
 LinearLayout chartBar;

 private int position;//用于標(biāo)識(shí)選擇的是哪個(gè)layout

 public static Fragment getInstance(int position) {
 FrHealthChart frHealthChart = new FrHealthChart();
 Bundle bundle = new Bundle();
 bundle.putInt(DATA, position);
 frHealthChart.setArguments(bundle);
 return frHealthChart;
 }

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
 View view = inflater.from(getContext()).inflate(R.layout.fragment_health_chart, container, false);
 ButterKnife.bind(this, view);
 Bundle bundle = getArguments();
 if (bundle != null) {
 position = bundle.getInt(DATA);
 initCard();
 }
 //加載卡片視圖，控制寬高比例
 RatioLayout ratioLayout = new RatioLayout(getContext());
 ratioLayout.addView(view);
 ratioLayout.setHeightWidthRatio("67/52");
 return ratioLayout;
 }

 private void initCard() {
 switch (position) {
 case 0://顯示layoutData1
 layoutData1.setVisibility(View.VISIBLE);
 layoutData2.setVisibility(View.GONE);
 layoutData3.setVisibility(View.GONE);
 initData();
 break;
 case 1://顯示layoutData2
 layoutData1.setVisibility(View.GONE);
 layoutData2.setVisibility(View.VISIBLE);
 layoutData3.setVisibility(View.GONE);
 initData();
 break;
 case 2://顯示layoutData3
 layoutData1.setVisibility(View.GONE);
 layoutData2.setVisibility(View.GONE);
 layoutData3.setVisibility(View.VISIBLE);
 initData();
 break;
 }
 }

 /**
 * 初始化數(shù)據(jù)
 */
 private void initData() {
 switch (position) {
 case 0:
 tvTitle.setText("卡片內(nèi)容" + "layout_data1");
 chartBar.setBackgroundColor(Color.parseColor("#6ddac6"));
 break;
 case 1:
 tvTitle.setText("卡片內(nèi)容" + "layout_data2");
 chartBar.setBackgroundColor(getResources().getColor(R.color.app_green_area));
 break;
 case 2:
 tvTitle.setText("卡片內(nèi)容" + "layout_data3");
 chartBar.setBackgroundColor(getResources().getColor(R.color.colorAccent));
 break;
 }
 }

}

7.主界面的activity代碼：

public class FrHealth extends Fragment implements ViewPager.OnPageChangeListener {

 @BindView(R.id.view_pager)
 ViewPager viewPager;
 @BindView(R.id.group)
 RadioGroup group;

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
 View view = LayoutInflater.from(getContext()).inflate(R.layout.fragment_health, container, false);
 ButterKnife.bind(this, view);
 initView();
 return view;
 }

 private void initView() {
 RadioButton childAt = (RadioButton) group.getChildAt(0);
 childAt.setChecked(true);
 viewPager.setPageTransformer(true, new ZoomOutPageTransformer());//設(shè)置卡片之間切換的樣式
 viewPager.setOffscreenPageLimit(3);//限定預(yù)加載的卡片個(gè)數(shù)
 ViewGroup.LayoutParams layoutParams = viewPager.getLayoutParams();
// layoutParams.height = AppUtil.dp2px(getContext(), 400);
 float scale = getContext().getResources().getDisplayMetrics().density;
 layoutParams.height = (int) (400 * scale + 0.5F);//計(jì)算高寬
 layoutParams.width = (int) (layoutParams.height * 0.8);
 if (viewPager.getParent() instanceof ViewGroup) {
 ViewGroup viewParent = ((ViewGroup) viewPager.getParent());
 viewParent.setClipChildren(false);
 viewPager.setClipChildren(false);
 }
 viewPager.addOnPageChangeListener(this);
 MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getChildFragmentManager());
 viewPager.setAdapter(myPagerAdapter);
 }

 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

 }

 @Override
 public void onPageSelected(int position) {
 //根據(jù)監(jiān)聽viewPager的PageChangeListener獲得選擇的是哪個(gè)卡片，并把其對(duì)應(yīng)位序的小圓點(diǎn)設(shè)置為選定狀態(tài)
 RadioButton childAt = (RadioButton) group.getChildAt(position);
 childAt.setChecked(true);
 }

 @Override
 public void onPageScrollStateChanged(int state) {

 }

 class MyPagerAdapter extends FragmentPagerAdapter {
 HashMap map = new HashMap<>();

 public MyPagerAdapter(FragmentManager fm) {
 super(fm);
 }

 @Override
 public Fragment getItem(int position) {
 FrHealthChart fragment = (FrHealthChart) map.get(position);
 if (fragment == null) {
 fragment = (FrHealthChart) FrHealthChart.getInstance(position);
 map.put(position, fragment);
 }
 return fragment;
 }

 @Override
 public int getCount() {
 return 3;//卡片個(gè)數(shù)
 }
 }
}

以上是“Android如何實(shí)現(xiàn)界面內(nèi)嵌多種卡片視圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！