HorizontalView实现的tabView

最新推荐文章于 2024-07-25 19:04:18 发布
最新推荐文章于 2024-07-25 19:04:18 发布
阅读量1.2k 收藏
点赞数
分类专栏： 代码 文章标签： android tabview实现 horizontalview实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyl963254113/article/details/39993775
版权

近日由于项目需要自己写了一个tabView，暂时支持两种模式，拓展重写的可行性还是比较好，主要思路很简单，实现也不复杂，代码比较简单，下面稍微记录一下。不正指出希望各位路过的大牛指正一下。

效果图：




上面图片上下两个tabView是同一个用horizontalview重写的组件，只是初始形态不同，上面设置了可以滚动，下面禁用滚动，上面的tab点击的时候如果能滚动到中间则会尽量滚动到中间显示。

废话不多说，上代码：

首先说下整个项目的构成，看下图：


大家也看到了，整体代码不多（本来就不是很难的，我比较笨，哈）

package com.example.tabviewtest;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
 * @author ,安
 */
public class TabScrollView extends HorizontalScrollView{

	public static final int MODE_LINE = 0;
	public static final int MODE_NONE = 1;
	private int mMode  = MODE_LINE;
	private View divider;
	private String tabViewTag = "TAB_TAg";
	private String[] titles;
	private DisplayMetrics metrics;
	private int lineWidth;
	private Context context;
	private OnTabClickListener tabClickListener;
	private LinearLayout layout;
	private boolean isScrollable = true;
	private boolean isFirst = true;
	private String tagValue;
	
	public TabScrollView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		init(context);
	}
	public TabScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		init(context);
	}
	public TabScrollView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		init(context);
	}
	
	private void init(Context context){
		this.context = context;
		metrics = getResources().getDisplayMetrics();
		lineWidth = metrics.widthPixels/4;
		layout = new LinearLayout(context);
		layout.setOrientation(LinearLayout.HORIZONTAL);
		layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
		setHorizontalScrollBarEnabled(false);
	}
	
	private void initTab(){
		switch (mMode) {
		case MODE_LINE:
			addLineTab();
			break;
        case MODE_NONE:
			addNoneTab();
			break;
		default:
			break;
		}
	}
	
	private void addLineTab(){
		setBackgroundColor(Color.WHITE);
		layout.removeAllViews();
		removeAllViews();
		for (int i = 0; i < titles.length; i++) {
			final View tabView = LayoutInflater.from(context).inflate(R.layout.tabview, null);
			((TextView)tabView.findViewById(R.id.txt_title)).setText(titles[i]);
			((TextView)tabView.findViewById(R.id.txt_title)).setTag(i);
			tabView.setTag("TAB_TAg");
			((ImageView)(tabView.findViewById(R.id.img_tab))).getLayoutParams().width = lineWidth/2;
			tabView.setOnClickListener(new OnClickListener() {
				@Override
				public void onClick(View v) {
					Log.i(tabViewTag, ((TextView)tabView.findViewById(R.id.txt_title)).getText().toString());
					scrollToCenter(tabView);
					tabClickListener.onTabClick(TabScrollView.this,tabView);
				}
			});
			layout.addView(tabView,new LayoutParams(lineWidth,LayoutParams.WRAP_CONTENT,Gravity.CENTER));
			addDivider(layout);
		}
		layout.removeViewAt(2*titles.length-1);
		addView(layout);
		hideLine();
	}
	
	@SuppressLint("NewApi")
	private void addNoneTab(){
		setBackgroundColor(Color.LTGRAY);
		layout.removeAllViews();
		removeAllViews();
		for (int i = 0; i < titles.length; i++) {
			final View tabView = LayoutInflater.from(context).inflate(R.layout.tabview, null);
			((TextView)tabView.findViewById(R.id.txt_title)).setText(titles[i]);
			((TextView)tabView.findViewById(R.id.txt_title)).setTag(i);
			tabView.setTag("TAB_TAg");
			((ImageView)(tabView.findViewById(R.id.img_tab))).getLayoutParams().width = lineWidth/2;
			tabView.setOnClickListener(new OnClickListener() {
				@Override
				public void onClick(View v) {
					// TODO Auto-generated method stub
					Log.i(tabViewTag, ((TextView)tabView.findViewById(R.id.txt_title)).getText().toString());
					tabClickListener.onTabClick(TabScrollView.this,tabView);
				}
			});
			layout.addView(tabView,new LayoutParams(lineWidth,LayoutParams.WRAP_CONTENT,Gravity.CENTER));
			addDivider(layout);
		}
		layout.removeViewAt(2*titles.length-1);
		addView(layout);
		hideColor();
		hideLine();
	}
	
	public void showLine(View v){
		v.findViewById(R.id.img_tab).setVisibility(View.VISIBLE);
		setTagValue((v.findViewById(R.id.txt_title)).getTag().toString());
	}
	
	public void showColor(View v){
		v.setBackgroundColor(Color.RED);
		setTagValue((v.findViewById(R.id.txt_title)).getTag().toString());
	}
	
	public void hideLine(){
		for (int i = 0; i < layout.getChildCount(); i++) {
			if (((layout.getChildAt(i)).getTag()) != null) {
				if (isFirst && i == 0 && mMode == MODE_LINE) {
					if (((layout.getChildAt(i)).getTag()).toString().equals(tabViewTag)) {
						(layout.getChildAt(i)).findViewById(R.id.img_tab).setVisibility(View.VISIBLE);
					}
				}else {
					if (((layout.getChildAt(i)).getTag()).toString().equals(tabViewTag)) {
						(layout.getChildAt(i)).findViewById(R.id.img_tab).setVisibility(View.INVISIBLE);
					}
				}
			}
		}
	}
	
	public void hideColor(){
		for (int i = 0; i < layout.getChildCount(); i++) {
			if (((layout.getChildAt(i)).getTag()) != null) {
				if (isFirst && i == 0 && mMode == MODE_NONE) {
					if (((layout.getChildAt(i)).getTag()).toString().equals(tabViewTag)) {
						(layout.getChildAt(i)).setBackgroundColor(Color.RED);
					}
				}else {
					if (((layout.getChildAt(i)).getTag()).toString().equals(tabViewTag)) {
						(layout.getChildAt(i)).setBackgroundColor(Color.LTGRAY);
					}
				}
			}
		}
	}
	
	private void addDivider(View v){
		divider = LayoutInflater.from(context).inflate(R.layout.line, null);
		((LinearLayout) v).addView(divider,new LayoutParams(2, 
				LayoutParams.MATCH_PARENT,
				Gravity.CENTER));
	}
	
	private void scrollToCenter(View v){
		if (v.getLeft() >= (lineWidth/2 + lineWidth)) {
			smoothScrollTo(v.getLeft() - lineWidth/2 - lineWidth, 0);
		}else {
			smoothScrollTo(-v.getLeft(), 0);
		}
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub
		if (isScrollable) {
			return super.onTouchEvent(ev);
		}
		return isScrollable;
	}
	
	public int getmMode() {
		return mMode;
	}

	public void setmMode(int mMode) {
		this.mMode = mMode;
	}

	public String[] getTitles() {
		return titles;
	}

	public void setTitles(String[] titles) {
		this.titles = titles;
		initTab();
	}
	public OnTabClickListener getTabClickListener() {
		return tabClickListener;
	}
	public void setTabClickListener(OnTabClickListener tabClickListener) {
		this.tabClickListener = tabClickListener;
	}
	public boolean isScrollable() {
		return isScrollable;
	}
	public void setScrollable(boolean isScrollable) {
		this.isScrollable = isScrollable;
	}
	public boolean isFirst() {
		return isFirst;
	}
	public void setFirst(boolean isFirst) {
		this.isFirst = isFirst;
	}
	public String getTagValue() {
		return tagValue;
	}
	public void setTagValue(String tagValue) {
		this.tagValue = tagValue;
	}
	
}
主要初始化两种模式，这里写的比较死（有空拓展一下），一种是大家看到的有下标的tabview，一种是下面背景色改变的tabview，思路很简单，大家应该都容易看懂，然后这里定义了一个OnTabClickListener，监听tabview的点击事件： 

public interface OnTabClickListener {

	void onTabClick(TabScrollView parent,View v);
	
}
当然还包括两个xml，一个是每个tabview的底层xml，一个是分隔栏的xml：

line.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:gravity="center"
    >
    
    <ImageView 
        android:id="@+id/divider"
        android:layout_width="2dp"
        android:layout_height="wrap_content"
        android:src="@drawable/news_line"
        android:scaleType="center"
        android:layout_marginBottom="2dp"/>

</LinearLayout>
tabview.xml: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:gravity="center"
    android:padding="5dp"
    >
    
    <TextView 
        android:id="@+id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="13sp"/>

    <ImageView 
        android:id="@+id/img_tab"
        android:layout_width="wrap_content"
        android:layout_height="2dp"
        android:background="#d2232a"
        android:layout_marginTop="2dp"
        android:layout_gravity="center_horizontal|bottom"
        />
</LinearLayout>

接下来就是在自己页面当中引用了，xml如下：

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical" >
<!--    <TextView
    android:id="@+id/id_tv_header_center_tv0"
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:text="江湖ersudhfoajfjakfdjsaf看sf艾丝凡的是能否看是否"
    android:ellipsize="marquee"
    android:focusable="true" 
	android:marqueeRepeatLimit="marquee_forever" 
	android:focusableInTouchMode="true" 
	android:scrollHorizontally="true"
    android:singleLine="true"/> -->
   
    <com.example.tabviewtest.TabScrollView 
        android:id="@+id/tabSv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.example.tabviewtest.TabScrollView>

    <com.example.tabviewtest.TabScrollView 
        android:id="@+id/tabSv2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.example.tabviewtest.TabScrollView>
    <WebView 
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
activity代码如下： 

package com.example.tabviewtest;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.WebView;
/**
 * @author ,安
 */
public class MainActivity extends Activity implements OnTabClickListener{

	private static final String TAG = MainActivity.class.getSimpleName();
	private TabScrollView tabSv,tabSv2;
//	private String[] strs = { "550 1.8DWT\n启悦版", "550 1.8DWT\n启智版",
//			"550S 1.8DWT\n智选版(MT)", "550S 1.8DWT\n智选版(6TST)", "550S 1.8DWT\n启逸版",
//			"550S 1.8DWT\n启臻版", "550D 1.8T\n品逸版", "550D 1.8T\n品臻版",
//			"550G 1.8T\n品仕版" };
//	private String[] items = { "基本参数","功力性能","前沿设计","影音娱乐"};
	private String[] strs;
	private String[] items;
	
	private WebView webView;
	private String urlPrefix = "file:///android_asset/parameter_550_";
	private String urlSuffix = ".html";
	private String initPage = "00";
	
	private void init(){
		strs = getResources().getStringArray(R.array.car_type);
		items = getResources().getStringArray(R.array.car_param);
	}
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
		tabSv = (TabScrollView)findViewById(R.id.tabSv);
		tabSv.setScrollable(true);              //设置可滚动
		tabSv.setmMode(TabScrollView.MODE_LINE);//设置下面有标签的模式
		tabSv.setTitles(strs);                  //设置tabview的文字显示
		tabSv.setTabClickListener(this);
		tabSv2 = (TabScrollView)findViewById(R.id.tabSv2);
		tabSv2.setScrollable(false);
		tabSv2.setmMode(TabScrollView.MODE_NONE);//设置下面没有标签的模式
		tabSv2.setTitles(items);
		tabSv2.setTabClickListener(this);
		webView = (WebView)findViewById(R.id.webView);
		Log.i(TAG, getAssets().toString());
		loadHtml(initPage);
	}
<pre name="code" class="java">        String partOne = "0";
	String partTwo = "0";
@Overridepublic void onTabClick(TabScrollView parent, View v) {// TODO Auto-generated method stubif (parent == tabSv) {tabSv.setFirst(false);tabSv.hideLine();tabSv.showLine(v);partOne = tabSv.getTagValue();}else if (parent == tabSv2) {tabSv2.setFirst(false);tabSv2.hideColor();tabSv2.showColor(v);partTwo = tabSv2.getTagValue();}loadHtml(partOne+partTwo);}private void loadHtml(String url){if (url == null || "".equals(url)) {url = initPage;}url = urlPrefix + url + urlSuffix;webView.loadUrl(url);}} 

 

 好了，上面就是整个实现，很多地方现在看来都不满意，路过的朋友多指教。 

 

下载地址：http://download.csdn.net/detail/hyl963254113/8025811；
 
 
 
 

                

        

        

    




    

      

        

            

              
                
                  FATALEE
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
LVGL，tabview用实体按键切换tab如何实现

				
			

			

				

					汽车电子软件领域知识分享
				

				

					01-07
					
					824
					
				

			

		

		

			
				
最近项目中有个需求，要将近百个参数显示出来，首先想到了list控件，但是太长了，挨个翻也很麻烦，于是就用到了tabview，在每个tab页面下再加上list，这样翻找的效率就高些，在用实体按键绑定tabview控件时，发现没法选择tab，网上搜了好多，也没有说得明白的，那只能看官方的文档了，最终，还是解决了。

			
		

	



                

              
                



	

		

			

				
					
TabView的horizontalview实现

				
			

			

				

					10-11
				

			

		

		

			
				
通常，`TabView` 的布局是垂直的，但在这个特定的场景中，我们讨论的是使用`horizontal`方向来实现`TabView`。这在一些设计上可能更具创新性，可以提供独特的用户体验，尤其是在屏幕空间有限或需要横向浏览大量内容...

			
		

	



                


  
              

                


	

		

			

				
					
Unity关于TabView界面快速实现

				
			

			

				

					W低小调W的博客
				

				

					06-06
					
					640
					
				

			

		

		

			
				
背景
开发过程中，可能会遇到点击Tab去切换一个界面的问题，有时候虽然可以实现功能但是代码过于臃肿，显得非常不易于维护。
实现原理
这种方式实现是基于Unity自带的ToggleGroup和Toggle扩展实现的，部分利用自带功能，最终达到效果。
运行效果图

演示视频
https://live.csdn.net/v/165916
Demo_036下载链接：
https://blog.csdn.net/qq_25122429/article/details/114098885?spm=1001.2014.3

			
		

	





	

		

			

				
					
SwiftUI中TabView的基本用法及外观样式设置

				
			

			

				

					郭永明的技术专栏
				

				

					05-27
					
					1127
					
				

			

		

		

			
				
TabView提供了一个交互式界面，允许用户在其内部的子界面自由的切换，TabView有两种显示模式，一个是DefaultTabViewStyle，另一个是PageTabViewStyle，本文将对DefaultTabViewStyle这种类型的基本使用和样式设置进行一下探索学习。

			
		

	



		

			
		



	

		

			

				
					
android+flutter实现tabView主框架展示

				
			

			

				

					漠天的博客
				

				

					04-10
					
					1478
					
				

			

		

		

			
				
用flutter实现首页面tab和对应的tab页面的展示：





一、主页面的main.dart代码：


import 'package:flutter/material.dart';
import './DrawerWidget.dart';
import './modal/main_bean.dart';

class MainPage extends StatelessWidget ...

			
		

	





	

		

			

				
					
LVGL 8.2 Tabview

				
			

			

				

					mygod2008ok的专栏
				

				

					07-17
					
					1729
					
				

			

		

		

			
				
LVGL 8.2 Tabview

			
		

	





	

		

			

				
					
tabView底层实现

				
			

			

				

					weixin_44729579的博客
				

				

					05-13
					
					132
					
				

			

		

		

			
				
1.首先把所有cell的位置全部计算好，保存
2.当cell要显示的时候，就会拿到这个cell去设置frame cell.frame = self.frams[row];




			
		

	





	

		

			

				
					
LVGL 8.2 Tabview & Window

				
			

			

				

					mygod2008ok的专栏
				

				

					07-17
					
					1219
					
				

			

		

		

			
				
LVGL 8.2 Tabview & Window

			
		

	





	

		

			

				
					
TabView用法

				
			

			

				

					Billy Jue的博客
				

				

					03-21
					
					4709
					
				

			

		

		

			
				
 //tab切换    TabView    {        id:tabView;        anchors.fill: parent;        tabPosition: Qt.BottomEdge;        clip: true        onCurrentIndexChanged:        {            switch(currentIndex)    ...

			
		

	





	

		

			

				
					
qml TabView的简单使用

				
			

			

				

					ckg3824278的博客
				

				

					02-03
					
					674
					
				

			

		

		

			
				
【代码】qml TabView的简单使用。

			
		

	





	

		

			

				
					
android开源tabview,TabBarView

				
			

			

				

					weixin_31621945的博客
				

				

					05-31
					
					370
					
				

			

		

		

			
				
声明一个TabBarView ，同时将ViewPager传递给它：LayoutInflater inflator =(LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);View v = inflator.inflate(R.layout.custom_ab, null);tabBarView = (TabB...

			
		

	





	

		

			

				
					
TabView实现分组

				
			

			

				

					11-13
				

			

		

		

			
				
下面我们将深入探讨`TabView`的实现、分组以及相关的代码复用和cell注册与判断。  一、`TabView`的基本使用  `TabView`通过`TabView`结构体来创建，其中可以包含多个视图，每个视图代表一个标签页。在SwiftUI中，...

			
		

	





	

		

			

				
					
QML-TabView竖直方向

				
			

			

				

					10-29
				

			

		

		

			
				
在这个特定的场景中，我们关注的是`TabView`在竖直方向上的实现，即标签是垂直排列的，而不是传统上常见的水平排列。这在某些设计中可能是更理想的选择，例如当空间有限或者为了提供独特的用户体验时。  `TabView`的...

			
		

	





	

		

			

				
					
用VC实现的tabview

				
			

			

				

					04-08
				

			

		

		

			
				
【标题】"用VC实现的tabview" 是一个基于Microsoft Visual C++（VC++）开发的项目，旨在创建一个TabView组件，它允许在单一视图内嵌套多个子窗体，提供类似浏览器标签页的功能。这样的设计可以有效利用屏幕空间，...

			
		

	





	

		

			

				
					
tabview实现源码 mfc

				
			

			

				

					11-24
				

			

		

		

			
				
"Tabview实现源码 MFC"是关于如何使用MFC来创建一个带有标签控件（TabCtrl）的用户界面，使得用户可以通过不同的标签页在多个视图（View）之间进行切换。这种设计常见于许多应用中，如设置窗口、多文档界面（MDI）...

			
		

	





	

		

			

				
					
多样ViewType Adapter封装与优化

				
			

			

				

					hyl963254113的专栏
				

				

					09-02
					
					1902
					
				

			

		

		

			
				
多样ViewType Adapter封装与优化
  面向： 列表控件多样化的viewType和高度相似的adapter代码重用问题。
背景作为android开发人员，我们都知道一般像listView，recyclerView等数据列表型的控件在数据绑定过程中一般都会采取adapter＋viewHolder这样的做法来实现，是的，这样会优化view的性能，从而让列表滚动显示数据更流畅，谷歌之前也是推荐

			
		

	





	

		

			

				
					
十大Material Design开源项目

				
			

			

				

					hyl963254113的专栏
				

				

					02-02
					
					475
					
				

			

		

		

			
				
链接地址：
http://m.csdn.net/article/2014-11-21/2822753/1

			
		

	





	

		

			

				
					
android前台服务

					
最新发布

				
			

			

				

					fumeidonga的博客
				

				

					07-25
					
					1133
					
				

			

		

		

			
				
关于作者：CSDN内容合伙人、技术专家， 从零开始做日活千万级APP。专注于分享各领域原创系列文章 ，擅长java后端、移动开发、商业变现、人工智能等，希望大家多多支持。未经允许不得转载。

			
		

	





	

		

			

				
					
qml通过点击button实现新增tabview的tab

				
			

			

				

					04-22
				

			

		

		

			
				
关于您的问题，您可以在QML中使用一个button，为其添加一个点击事件处理程序，然后在该处理程序中实现添加一个TabView的tab。具体代码可以参考以下示例：  ``` import QtQuick 2.0 import QtQuick.Controls 2.5  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值