Android实现界面内嵌多种卡片视图(ViewPager、RadioGroup)

Android实现界面内嵌多种卡片视图,具体内容如下

效果如图所示:

1.选择某个界面时,对应的第几个小圆点亮:

通过selector制造圆点和进行更改小圆点被选择和未被选择时的颜色:

<?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.主界面内嵌的卡片视图布局:

<?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.卡片布局对应的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;//用于标识选择的是哪个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;
 }
 }

 /**
 * 初始化数据
 */
 private void initData() {
 switch (position) {
  case 0:
  tvTitle.setText("卡片内容" + "layout_data1");
  chartBar.setBackgroundColor(Color.parseColor("#6ddac6"));
  break;
  case 1:
  tvTitle.setText("卡片内容" + "layout_data2");
  chartBar.setBackgroundColor(getResources().getColor(R.color.app_green_area));
  break;
  case 2:
  tvTitle.setText("卡片内容" + "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());//设置卡片之间切换的样式
 viewPager.setOffscreenPageLimit(3);//限定预加载的卡片个数
 ViewGroup.LayoutParams layoutParams = viewPager.getLayoutParams();
// layoutParams.height = AppUtil.dp2px(getContext(), 400);
 float scale = getContext().getResources().getDisplayMetrics().density;
 layoutParams.height = (int) (400 * scale + 0.5F);//计算高宽
 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) {
 //根据监听viewPager的PageChangeListener获得选择的是哪个卡片,并把其对应位序的小圆点设置为选定状态
 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;//卡片个数
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android中使用SQLite3 命令行查看内嵌数据库的方法

    在上图中,除了最后一个红色的方框,其它方框都是adb shell下的命令. [1]在Android程序中,一般创建的数据库存放在 /data/data/[应用程序包名]/databases 的目录下. [2]cd 命令:文件夹跳转命令.ls 命令:查看某个文件夹下面有哪些文件. [3]使用 "sqlite3 [数据库名称] " 命令来对某数据库进行一系列的操作. [4]在经过第[3]步骤后,可以使用 .tables 命令查看某数据库中包含哪些表.若要查询某表中包含的数据,在 sqlit

  • Android应用中内嵌SQLite数据库的基本操作指南

    一.首先写一个类继承SQLiteOpenHelper类 重写他的方法指定db的名称.版本,重写oncreat和onUpgrade方法,写SQL语句创建表 public class MySQLiteOpenhelper extends SQLiteOpenHelper { private static String name = "person.db"; private static int version = 1; public MySQLiteOpenhelper(Context c

  • Android 工程内嵌资源文件的两种方法

    方法一 res/raw目录下存放,比如cwj.dat一个二进制文件,我们可以读取可以直接 复制代码 代码如下: InputStream is=context.getResources().openRawResource(R.raw.cwj); 方法二 工程根目录下的assets文件夹中存放,比如assets/cwj.dat 这样我们使用下面的代码 复制代码 代码如下: AssetManager am = context.getAssets(); InputStream is = am.open(

  • Android实现界面内嵌多种卡片视图(ViewPager、RadioGroup)

    Android实现界面内嵌多种卡片视图,具体内容如下 效果如图所示: 1.选择某个界面时,对应的第几个小圆点亮: 通过selector制造圆点和进行更改小圆点被选择和未被选择时的颜色: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item an

  • Android使用NestedScrollView 内嵌RecycleView滑动冲突问题解决

    目录 场景描述 实现思路 问题和优化 优化 场景描述 使用NestedScrollView 内嵌RecycleView时,当用户上滑时,NestedScrollView需要首先响应上滑事件,直到ScrollView无法滑动,再由RecycleView进行响应滑动事件 效果演示: 实现思路 参考谷歌开发者文档中关于view group事件分发的思路,自定义CustomScrollView继承 NestedScrollView 重写onInterceptTouchEvent方法,在拦截到上滑事件时,

  • Android Studio配置内嵌JDK的方法

    今天发现JDK环境变量没有配置好. 我没有专门去下载java,在下载Android Studio时,会自带内嵌的JDK. 打开File-OtherSettings-DefaultProjectStructure,可看到AS已自动勾选Use embedded JDK,而且是官方推荐的做法. 以下是配置环境变量的操作. java 1.8以后就无需CLASSPATH环境变量了. 我们只需配置JAVA_HOME和PATH即可. JAVA_HOME C:\AndroidStudio\jre (JDK安装目

  • ViewPager+RadioGroup实现左右滑动卡片布局

    本文实例为大家分享了ViewPager+RadioGroup实现左右滑动卡片布局的具体代码,供大家参考,具体内容如下 效果如图所示: 1.选择某个界面时,对应的第几个小圆点亮: 通过selector制造圆点和进行更改小圆点被选择和未被选择时的颜色: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/r

  • Android内嵌Unity并实现互相跳转的实例代码

    说明 本案例使用Unity2019.3.8f1与AndropidStudio3.6.3 源码git地址:https://github.com/guochaolinDLKF/UnityAndAndroid.git 下面是效果 创建Unity项目 首先创建一个Unity空项目 在空场景中创建一个空节点名字为unityObject,注意:这个名字是等会再Android中向Unity发送消息时的API中必须要传的参数 然后在节点上添加一个脚本,脚本中的代码如下: using UnityEngine; u

  • python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例

    这几天研究了下PyQt5中QWebEngineView内嵌网页与Python的数据交互,今天把实例方法与代码发布出来供大家参数 数据交互需要load进一个网页,这里我选择load进一个本地html网页:JSTest.html. 同时,QWebEngineView与外面的交互还需要Qt官方提供的一个js文件:qwebchannel.js,这个文件可以在网上下载. JSTest.html和qwebchannel.js两个文件放在同一个目录下,我这边都是放在Python工程目录下. qwebchann

  • Android用户注册界面简单设计

    本文实例为大家分享了Android用户注册界面的设计,供大家参考,具体内容如下 I. 实例目标 设计一个用户注册界面,在其中要使用到一些基础控件,如 文本框.编辑框.按钮.复选框等控件 II. 技术分析 首先在布局文件中使用控件的标记来配置所需要的各个控件,然后在 主Activity中获取到该控件,给其添加监听器来监听其操作,最后在控制台输出所操作的内容. III. 实现步骤 在Eclipse中创建 Android项目,名称为 TestUserRegister .设计一个用户注册界面,在其中要使

  • 圣诞节,写个程序练练手————Android 全界面悬浮按钮实现

    开始我以为悬浮窗口,可以用Android中得PopupWindow 来实现,虽然也实现了,但局限性非常大.比如PopupWindow必须要有载体View,也就是说,必须要指定在那个View的上面来实现.以该View为相对位置,来显示PopupWindow.这就局限了其智能在用户交互的窗口上,相对的显示.而无法自由的拖动位置和在桌面显示. 于是查阅了一些资料,有两种实现方法.一种是自定义Toast,Toast是运行于所有界面之上的,也就是说没有界面可以覆盖它.另一种是Android中得Compat

  • 利用Django内置的认证视图实现用户密码重置功能详解

    前言 密码重置功能相信对大家来说都不陌生,本文主要给大家介绍了关于使用Django内置的认证视图实现简单的通过邮箱重置密码的功能,分享出来供大家参考学习,下面话不多说了,来一起来看看详细的介绍吧. 版本: django 1.11 实现方法 在django.contrib.auth.views中提供了四个类视图用于密码重置 class PasswordResetView URL name: password_reset  #要保持相同 通过给邮箱发送重置密码的链接进行密码重置.注意如果邮箱不存在,

随机推荐