android 层叠卡片 android 滑动卡片

转载

mob64ca140c75c7 2023-11-16 10:11:07

文章标签 android 层叠卡片 android 上划卡住tab ide 加载自定义 文章分类 Android 移动开发

android使用Tab效果滑动

使用SlidingTabLayout

样式：直接在xml上的SlidingTabLayout上改，他是继承HorizontalScrollView的，可以通过background来设置颜色

加入custom_tab.xml的时候，是代表tab使用图标

改下划线的颜色：

第一种方式：

slidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_text_color));

第二种方式

slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer(){
@Override
public int getIndicatorColor(int position) {
return Color.WHITE;
}
});

想改Tab点击的效果，发现slidingTabLayout的createDefaultTabView方法，是根据设定的Theme来进行改变的。

如何使用在Fragment中的静态方法newInstance传递数据呢

思路：通过Bundle进行传递，在oncreate方法中使用getArguments()方法得到，另一种方式是通过fragment.title的方式来改变成员变量的值

public static final String BG_PAGE="BgManagerFragment";
public static final String FRAGMENT_TITLE="tilte";
private int mPage;
private String title;
public BgManagerFragment() {
// Required empty public constructor
}
public static BgManagerFragment newInstance(String title,int page){
Bundle args = new Bundle();
args.putInt(BG_PAGE, page);
args.putString(FRAGMENT_TITLE, title);
BgManagerFragment fragment = new BgManagerFragment();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage=getArguments().getInt(BG_PAGE);//在newInstance方法中通过Bundle进行传递值
title=getArguments().getString(FRAGMENT_TITLE);
}

另一种，只列出newInstance()方法

public static BgManagerFragment newInstance(String title,int page){
BgManagerFragment fragment = new BgManagerFragment();
fragment.title=title;
fragment.mPage=page;
return fragment;
}

如何让不同的fragment加载不同数据，进行不同的显示。通过别人的案例，可以知道需要对adapter和Fragment进行修改

添加图标到tab

private int[] imageResId = {
R.drawable.ic_one,
R.drawable.ic_two,
R.drawable.ic_three
};
// ...
@Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
// return tabTitles[position];
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}

注意

但是由于SlidingTabLayout自带的TextView会调用 setAllCaps(true)，会取消所有的 ImageSpan 的效果。所以需要自定义TabView。

接着：

在 tab.setViewPager(pager) 之前调用 tab.setCustomTabView(R.layout.custom_tab,0) 设置自定义TabView。

tab.setCustomTabView(R.layout.custom_tab,0);

tab.setViewPager(pager);

如果要每个TabView都平分屏幕宽度，只需在自定义的TextView 上加上权重属性即可;

android:layout_weight="1"

通过以上方式，是实现了显示图标，但是selector的效果完全没有了，那么如何解决？

第一种解决方式：

按照stackoverflow来，就可以解决了

第一步：修改适配器FragmentPagerAdapter

public class ClubMemberManagerAdapter extends FragmentPagerAdapter {
private int[] imageResId = {R.drawable.tab_select_home,R.drawable.tab_select_act,R.drawable.tab_select_data};
//添加一个获取资源的方法
public int getDrawableId(int position){
//Here is only example for getting tab drawables
return imageResId[position];
}
//下面这个方法，是为了不让字体消失出来
@Override
public CharSequence getPageTitle(int position) {
Drawable image = context.getResources().getDrawable(imageResId[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}

第二步：

那么相应的加载SlidingTabLayout的Activity/fragment就不需要这句

//slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);

第三步：

修改SlidingTabLayout的populateTabStrip()方法

private void populateTabStrip() {
//强制转换成ClubMemberManagerAdapter，为了得到ClubMemberManagerAdapter下的得到资源的方法：getDrawableId
final ClubMemberManagerAdapter adapter = (ClubMemberManagerAdapter)mViewPager.getAdapter();
final OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i < adapter.getCount(); i++) {
View tabView = null;
TextView tabTitleView = null;
if (mTabViewLayoutId != 0) {
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
false);
tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
}
if (tabView == null) {
//默认是生成TextView
tabView = createDefaultTabView(getContext());
}
if (tabImageView == null && TextView.class.isInstance(tabView)) {
//这里依然是TextView.class.的判断父系
tabImageView = (ImageView) tabView;
}
if (mDistributeEvenly) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
lp.width = 0;
lp.weight = 1;
}
tabTitleView.setCompoundDrawablesWithIntrinsicBounds(0,adapter.getDrawableId(i), 0, 0);
//上面这句是TexView加载资源的方式，参数为(左，上，右，下)
tabTitleView.setText(adapter.getPageTitle(i));
tabTitleView.setTextColor(Color.WHITE);
tabView.setOnClickListener(tabClickListener);
String desc = mContentDescriptions.get(i, null);
if (desc != null) {
tabView.setContentDescription(desc);
}
mTabStrip.addView(tabView);
if (i == mViewPager.getCurrentItem()) {
tabView.setSelected(true);
}
}
}

通过上面的配置会发现，图标的selector效果有了，但是毕竟是TextView,虽然没有字体，但还是会继续占位置，效果依然不理想。所以...

第二种解决方式：直接将TextView改成ImageView便可以。

第一步：同理，依然需要资源

public class ClubMemberManagerAdapter extends FragmentPagerAdapter {
public int getDrawableId(int position){
//Here is only example for getting tab drawables
return imageResId[position];//图标资源
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];//使用imageview,这个只是一个摆设而已
}
}

第二步，依然是修改SlidingTabLayout的方法populateTabStrip

private void populateTabStrip() {
//强制转换成ClubMemberManagerAdapter，为了得到ClubMemberManagerAdapter下的得到资源的方法：getDrawableId
final ClubMemberManagerAdapter adapter = (ClubMemberManagerAdapter)mViewPager.getAdapter();
final OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i < adapter.getCount(); i++) {
View tabView = null;
ImageView tabImageView = null;
if (mTabViewLayoutId != 0) {
// If there is a custom tab view layout id set, try and inflate it
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
false);
tabImageView = (ImageView) tabView.findViewById(mTabViewTextViewId);
}
if (tabView == null) {
//改成ImageView生成方式
tabView = createImageViewTabView(getContext());
}
if (tabImageView == null && ImageView.class.isInstance(tabView)) {
//这里是ImageView.class.的判断父系，因为改成ImageView的生成方式
tabImageView = (ImageView) tabView;
}
if (mDistributeEvenly) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
lp.width = 0;
lp.weight = 1;
}
//加载图标资源
tabImageView.setImageResource(adapter.getDrawableId(i));
tabView.setOnClickListener(tabClickListener);
String desc = mContentDescriptions.get(i, null);
if (desc != null) {
tabView.setContentDescription(desc);
}
mTabStrip.addView(tabView);
if (i == mViewPager.getCurrentItem()) {
tabView.setSelected(true);
}
}
}

第三步，就是方法createImageViewTabView是怎么实现的呢

protected ImageView createImageViewTabView(Context context){
ImageView imageView = new ImageView(context);
imageView.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
TypedValue outValue = new TypedValue();
getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
outValue, true);//使用系统的主题
imageView.setBackgroundResource(outValue.resourceId);
int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
imageView.setPadding(padding, padding, padding, padding);
return imageView;
}

改成这种imageview后，感觉已经将SlidingTabLayout改成了自能加载ImageView的类了。

用另一种的实现

Fragment上使用Tab

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。