Android實(shí)現(xiàn)界面內(nèi)嵌多種卡片視圖（ViewPager、RadioGroup）
更新時(shí)間：2021年06月09日 11:51:28 作者：An_nAl
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)界面內(nèi)嵌多種卡片視圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
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í)的顏色：
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true"> <shape> <solid android:color="@color/app_green_area" /> <corners android:radius="5dp" /> </shape> </item> <item android:state_checked="false"> <shape> <solid android:color="#fff" /> <corners android:radius="5dp" /> <stroke android:width="0.2dp" android:color="@color/app_line"/> </shape> </item> </selector>
2.主界面布局：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@color/app_gray_bg"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="25sp" android:textColor="@color/colorPrimary" android:text="health頁面"/> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_gravity="center" android:overScrollMode="never" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> <RadioGroup android:layout_alignParentBottom="true" android:layout_marginBottom="20dp" android:id="@+id/group" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:orientation="horizontal"> <RadioButton android:layout_width="10dp" android:layout_height="10dp" android:layout_marginLeft="10dp" android:background="@drawable/selector_point" android:button="@null" /> <RadioButton android:layout_width="10dp" android:layout_height="10dp" android:layout_marginLeft="10dp" android:background="@drawable/selector_point" android:button="@null" /> <RadioButton android:layout_width="10dp" android:layout_height="10dp" android:layout_marginLeft="10dp" android:background="@drawable/selector_point" android:button="@null" /> </RadioGroup> </RelativeLayout>
3.主界面內(nèi)嵌的卡片視圖布局：
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="2dp" app:cardCornerRadius="8dp"> <LinearLayout android:id="@+id/chart_bar" android:adjustViewBounds="true" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/tv_title" android:textColor="@color/app_black" android:gravity="center" android:textSize="30sp" android:layout_width="match_parent" android:layout_height="wrap_content" /> <LinearLayout android:adjustViewBounds="true" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/layout_data1" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:visibility="visible" android:orientation="vertical"> <TextView android:text="layout_data1" android:textSize="30sp" android:textColor="@color/colorPrimary" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:id="@+id/layout_data2" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:visibility="visible" android:orientation="vertical"> <TextView android:text="layout_data2" android:textSize="30sp" android:textColor="@color/colorPrimary" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> <LinearLayout android:id="@+id/layout_data3" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:visibility="visible" android:orientation="vertical"> <TextView android:text="layout_data3" android:textSize="30sp" android:textColor="@color/colorPrimary" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView>
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<Integer, Fragment> 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ù)
}
}
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android控件系列之RadioButton與RadioGroup使用方法
- android RadioGroup的使用方法
- android自定義RadioGroup可以添加多種布局的實(shí)現(xiàn)方法
- Android程序開發(fā)中單選按鈕(RadioGroup)的使用詳解
- Android開發(fā)之RadioGroup的簡單使用與監(jiān)聽示例
- Android RadioGroup和RadioButton控件簡單用法示例
- Android RadioGroup 設(shè)置某一個(gè)選中或者不可選中的方法
- Android使用RadioGroup實(shí)現(xiàn)底部導(dǎo)航欄
- Android 自定義View實(shí)現(xiàn)任意布局的RadioGroup效果
- Android基礎(chǔ)控件RadioGroup使用方法詳解
相關(guān)文章
Compose自定義View實(shí)現(xiàn)繪制Rainbow運(yùn)動(dòng)三環(huán)效果
這篇文章主要為大家介紹了一個(gè)基于Compose自定義的一個(gè)Rainbow彩虹運(yùn)動(dòng)三環(huán)，業(yè)務(wù)上類似于iWatch上的那個(gè)運(yùn)動(dòng)三環(huán)，感興趣的小伙伴可以了解一下2023-02-02
自定義 PhotoView 繼承(extends)自 View。并在最中間顯示后面操作的圖片。繪制圖片可以重寫 onDraw()方法，并在里面通過Canvas.drawBitmap()來要繪制圖片2023-04-04
Android中兩個(gè)Activity之間數(shù)據(jù)傳遞及返回問題
本篇文章主要介紹了Android中兩個(gè)Activity之間數(shù)據(jù)傳遞及返回問題，這里整理了詳細(xì)的代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
Android App開發(fā)中Gradle構(gòu)建過程的配置方法
這篇文章主要介紹了Android App開發(fā)中Gradle構(gòu)建過程的配置方法,包括在Gradle中配置manifest的方法,需要的朋友可以參考下2016-06-06
Android實(shí)現(xiàn)左滑關(guān)閉窗口
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)左滑關(guān)閉窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
使用ViewPager實(shí)現(xiàn)高仿launcher左右拖動(dòng)效果
今天用ViewPager這個(gè)類實(shí)現(xiàn)了同樣的左右拖動(dòng)效果,這樣代碼更少，但是效果是一樣的,ViewPager是實(shí)現(xiàn)左右兩個(gè)屏幕平滑地切換的一個(gè)類，它是Google提供的,有需要的朋友可以了解下2013-01-01
這篇文章主要介紹了AndroidStudio4.0日志中文亂碼問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
本文將詳細(xì)介紹下html5在android中的使用:特效按鈕的進(jìn)展/在html5中有關(guān)于觸摸屏的事件,感興趣的你可以參考下，或許對(duì)你有所幫助2013-03-03
這篇文章主要為大家詳細(xì)介紹了Android振動(dòng)器使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了詳解Android單元測試最佳實(shí)踐，本文介紹了如何對(duì)Android原生應(yīng)用進(jìn)行單元測試，同時(shí)示例代碼采用MVP模式以提高代碼的可讀性和可測試性2018-08-08