android自定义动态滚动tab+viewpager+fragment

近来一段时间,项目有点空闲,就总结总结开发中常用的东西,封装封装,提炼提炼,写写博客与大家共勉,有什么不对的或者更好的思路欢迎大家广开言路~~

 

在android开发中,常见的ui框架中,很经典的一种就是如图所示:

 

整体是自定义的支持水平滚动的tab+左右滑动viewpager+fragment

入口activity  HorizontalScrollViewTestActivity:

<span style="font-size:18px;">package com.example.webservice.widget.ColumnHorizontalScrollView;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.example.webservice.R;
import com.example.webservice.bean.TabCode;
import com.example.webservice.widget.scrollTab.ScrollTabs;
/**
 * 用来测试水平滚动的tab的实例activity
 * @author xhf
 *
 */
public class HorizontalScrollViewTestActivity extends FragmentActivity{
	
	private ViewPager mViewPager;
	
	/** 自定义HorizontalScrollView */
	private ColumnHorizontalScrollView mColumnHorizontalScrollView;
	/**
	 * 用来添加tab的root布局
	 */
	LinearLayout mRadioGroup_content;
	
	RelativeLayout rl_column;
	
	/** 左阴影部分*/
	public ImageView shade_left;
	
	/** 右阴影部分 */
	public ImageView shade_right;
	
	/** 屏幕宽度 */
	private int mScreenWidth = 0;
	
	private ScrollTabs stTabs;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.view_column_horizontal_scroll);
		initView();
	
	}
	
	private void initView()
	{
		mColumnHorizontalScrollView =  (ColumnHorizontalScrollView)findViewById(R.id.mColumnHorizontalScrollView);
		
		rl_column = (RelativeLayout) findViewById(R.id.rl_column);
		mViewPager = (ViewPager) findViewById(R.id.viewPager);
		//viewpager每次显示出来一个fragment时,都会把旁边的一个页面也预加载了,当然你可以控制预加载的页面的数量
		mViewPager.setOffscreenPageLimit(0);//不预加载
		shade_left = (ImageView) findViewById(R.id.shade_left);
		shade_right = (ImageView) findViewById(R.id.shade_right);
		
		stTabs = (ScrollTabs) findViewById(R.id.st_tabs);
		mColumnHorizontalScrollView.setParam(this, mScreenWidth, stTabs, shade_left, shade_right,  rl_column);
		List<TabCode> lists=new ArrayList<TabCode>();
		TabCode tc1=new TabCode(1000,"科技");
		TabCode tc2=new TabCode(1001,"财经");
		TabCode tc3=new TabCode(1002,"新闻");
		TabCode tc4=new TabCode(1003,"原创");
		TabCode tc5=new TabCode(1004,"体育");
		lists.add(tc1);
		lists.add(tc2);
		lists.add(tc3);
		lists.add(tc4);
		lists.add(tc5);
		
		//将activity传递到自定义view中,以获取screenWidth
		stTabs.setParams(HorizontalScrollViewTestActivity.this,lists);
//tab item点击事件	    </span>
<span style="font-size:18px;">stTabs.setOnItemClickListener(new ScrollTabs.OnItemClickListener() {
	        @Override
	        public void onItemClick(int index,TabCode tc) {
	            //重写底部的数据值
	            //envMonitorInfo = sysLoadMonitorInfos.get(index);
	            //loadStatisticsData(envMonitorInfo.getStatisticsData(), showDataType);
	           Toast.makeText(HorizontalScrollViewTestActivity.this, String.valueOf(tc.getCode()), Toast.LENGTH_LONG).show();
	        }
	    });
	    
	    List<Fragment> fragments=new ArrayList<Fragment>();
	    for(int i=0;i<lists.size();i++)
	    {
	    	TabFragment tf=new TabFragment();
	    	fragments.add(tf);
	    }
	    ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager());
	    adapter.setmFragments(fragments);
	    mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				//改变fragment的切换
				mViewPager.setCurrentItem(arg0);
				//改变scroll tab的头部选中效果
				stTabs.changeTabCursor(arg0);
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
			}
			
			@Override
			public 
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Android TableLayout is a ViewGroup which displays the data in a tabular form. It is used to create a user interface with rows and columns similar to a spreadsheet. ViewPager is a View which allows the user to swipe left and right to navigate between pages. Fragments are reusable components which can be used to create dynamic user interfaces. To create a TableLayout with ViewPager and Fragment, follow the below steps: 1. Create a new Android Studio project. 2. Add the required dependencies in the build.gradle file. 3. Create a new Fragment class for each tab. 4. Create a layout file for each Fragment. 5. Create a new FragmentPagerAdapter class to manage the Fragments. 6. Create a layout file for the Activity which will contain the TableLayout and ViewPager. 7. Add the TableLayout and ViewPager to the layout file. 8. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter. 9. Create a new TabLayout and add it to the layout file. 10. Add the TabLayout to the ViewPager. Example code: 1. Add the dependencies in the build.gradle file: ``` dependencies { implementation 'com.google.android.material:material:1.4.0' implementation 'androidx.viewpager2:viewpager2:1.0.0' } ``` 2. Create a new Fragment class for each tab: ``` public class TabFragment extends Fragment { private int tabPosition; public TabFragment(int tabPosition) { this.tabPosition = tabPosition; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_tab, container, false); TextView textView = view.findViewById(R.id.tab_text); textView.setText(getString(R.string.tab_text, tabPosition + 1)); return view; } } ``` 3. Create a layout file for each Fragment: ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tab_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:textAppearanceLarge" /> </LinearLayout> ``` 4. Create a new FragmentPagerAdapter class to manage the Fragments: ``` public class TabAdapter extends FragmentStateAdapter { public TabAdapter(FragmentActivity activity) { super(activity); } @Override public Fragment createFragment(int position) { return new TabFragment(position); } @Override public int getItemCount() { return 3; } } ``` 5. Create a layout file for the Activity which will contain the TableLayout and ViewPager: ``` <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> ``` 6. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter: ``` public class MainActivity extends AppCompatActivity { private ViewPager2 viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); } } ``` 7. Create a new TabLayout and add it to the layout file: ``` <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> ``` 8. Add the TabLayout to the ViewPager: ``` TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); ``` This will create a TableLayout with ViewPager and Fragment. The user can swipe left and right to navigate between tabs. Each tab will display a Fragment with a TextView showing the tab number.
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值