草庐IT

带有底点的 Android ViewPager

coder 2023-05-07 原文

我想在我的 ViewPager 中添加 3 个底部点，就像这样。

我使用 FragmentActivity 并支持库 ViewPager。

最佳答案

不需要那么多代码。

您可以通过仅使用 viewpager 和 tablayout 来完成所有这些工作，而无需编写太多代码。。 p>

您的主要布局:

<RelativeLayout
   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="wrap_content">

   <android.support.v4.view.ViewPager
       android:id="@+id/pager"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

   </android.support.v4.view.ViewPager>
   <android.support.design.widget.TabLayout
       android:id="@+id/tabDots"
       android:layout_alignParentBottom="true"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabBackground="@drawable/tab_selector"
       app:tabGravity="center"
       app:tabIndicatorHeight="0dp"/>
</RelativeLayout>

如下连接您的 UI 元素不活动或 fragment :

Java 代码:

mImageViewPager = (ViewPager) findViewById(R.id.pager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mImageViewPager, true);

就是这样，你可以走了。

您需要在 drawable 文件夹中创建以下 xml 资源文件。

tab_indicator_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="4dp"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"/>
</shape>

tab_indicator_default.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:innerRadius="0dp"
            android:shape="oval"
            android:thickness="2dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
    </shape>

tab_selector.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_indicator_selected"
          android:state_selected="true"/>

    <item android:drawable="@drawable/tab_indicator_default"/>
</selector>

感觉像我一样懒惰？好了，上面所有的代码都被转换成一个库了! 用法 在您的 gradle 中添加以下内容: 实现 'com.chabbal:slidingdotsplash:1.0.2' 将以下内容添加到您的 Activity 或 Fragment 布局中。

<com.chabbal.slidingdotsplash.SlidingSplashView
        android:id="@+id/splash"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:imageResources="@array/img_id_arr"/>

在 strings.xml 中创建一个整数数组，例如

<integer-array name="img_id_arr">
   <item>@drawable/img1</item>
   <item>@drawable/img2</item>
   <item>@drawable/img3</item>
   <item>@drawable/img4</item>
</integer-array>

完成! Extra 为了监听页面变化，使用 addOnPageChangeListener(listener); Github link .

关于带有底点的 Android ViewPager，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20586619/

有底ViewPagerandroid34stronguser-interfaceandroid-viewpagerandroid-fragmentactivityviewpagerindicator

有关带有底点的 Android ViewPager的更多相关文章

  1. javascript - 每个面有 K 个顶点的 3D 点的三 Angular 剖分 - 2

    我正在使用Three.js。我有一组3D点(x,y,z)和一组面孔。一张脸由K个点组成。它既可以是凸的也可以是凹的。我在Three.js文档中找不到任何可以帮助我的东西。一种解决方案可能是对这些形状进行三Angular剖分，但到目前为止我还没有找到任何简单的3D三Angular剖分算法。另一个解决方案是做类似的事情:varpointsGeometry=newTHREE.Geometry();pointsGeometry.vertices.push(newTHREE.Vector3(10,0,0));pointsGeometry.vertices.push(newTHREE.Vector

  2. javascript - 如何在鼠标悬停时获取 highcharts 图形点的值？ - 2

    我正在使用以下逻辑创建一个highcharts图表系列:this.series=[];for(variinheaderData){varheader=headerData[i];this.series.push({name:header.name,data:[],yAxis:parseInt(header.axis),id:header.id,type:'column',zIndex:1,events:{mouseOver:function(e){console.log('Point:',e.point);}}});}我read该点是事件e的属性，但在我的例子中e.point是unde

  3. javascript - ChartJS - 只有 1 点的折线图问题 - 2

    我刚想用折线图显示1个单点时发现这个小错误..我不知道为什么它没有显示点。这是屏幕截图:这是我创建对象的方式:avg_payment={labels:["Jan"]datasets:[{label:"Average_payment"fillColor:"rgba(220,220,220,0.5)"strokeColor:"rgba(220,220,220,0.8)"highlightFill:"rgba(220,220,220,0.75)"highlightStroke:"rgba(220,220,220,1)"data:[65]}]}这是我目前的解决方法，尽管它仍然给我相同的结果:i

  4. javascript - 如何使用具有多个入口点的 Webpack 和 Gulp 来转换应用程序和测试目录？ - 2

    我正在构建一个基本的博客项目来练习使用React、ES6和Mocha测试框架。在我的defaultGulp任务中转换我的ES6测试和应用程序代码时遇到问题。当我运行default任务并将./test/posts.js的内容更改为watch时出现此错误生效:[11:17:29]Usinggulpfile~/WebstormProjects/blog/gulpfile.js[11:17:29]Starting'default'...[11:17:29]Finished'default'after8.54msstream.js:75thrower;//Unhandledstreamerror

  5. javascript - 如何显示图中每个点的 Y 轴刻度 - 2

    我正在使用chartjs来显示一些数据，但我在Y轴可视化方面遇到了麻烦。我希望图表中的每个点都在Y轴上有一个值。现在Y轴显示值以10为步长。这是我实际的yAxis配置:yAxes:[{position:"left",ticks:{source:"data",}}]这是实际的图表。我只想在Y轴上显示所显示点的实际值。在X轴上，此配置有效，时间与点对齐。预期: 最佳答案 您必须使用AxisCallbacks(docs)，尤其是afterBuildTicks。在我的linkedexample(jsbin)我将0压入我的数据，因为您不能使用

  6. javascript - 在 Javascript 中查找坏点的算法 - 2

    我正在尝试创建一种算法，用于从.csv格式的强度图中检测和计算坏点。我目前的方法是将我正在测试的像素的值除以紧邻右侧的像素值(或者，如果在最右侧，则为左侧的像素值)。如果红利小于某个阈值(当前为.9)，那么我将其标记为坏点。我的问题是，是否有更好/更有效的方法来计算像素是否失效？示例csv输出:3183317632073183321232113197319831833191319331771135318531763175318431883179318131813165318431873183在此示例中，中间像素将是“死”像素。 最佳答案

  7. javascript - 让目录中的所有文件成为 webpack 入口点的最佳方法？ - 2

    我想为网站创建多个入口点，这在Webpack中使用entry属性的对象很容易完成，例如here.但是随着站点的增长(并且它不可避免地会)，必须添加每个入口点似乎很麻烦并且容易出错。所以我想简单地指向一个目录并说“这里是所有入口点。”所以我做了这个:varpath=require('path');varfs=require('fs');varentryDir=path.resolve(__dirname,'../source/js');varentries=fs.readdirSync(entryDir);varentryMap={};entries.forEach(function(e

  8. javascript - React 是否会自动 trim 已从 DOM 中删除挂载点的组件？ - 2

    例如，如果我使用renderComponent渲染到DOM节点，然后手动删除DOM节点，我是否只是泄漏了内存？渲染到删除的DOM节点的React组件是否被trim？ 最佳答案 您可能泄漏了内存。使用React.unmountComponentAtNode(node) 关于javascript-React是否会自动trim已从DOM中删除挂载点的组件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/q

  9. javascript - 在 Highcharts 中动态更改点的颜色 - 2

    我已经能够动态更改图表中点的颜色，但是当我将鼠标悬停在该点上时，该点的颜色将变为之前的颜色。我这里有一个fiddle:jfiddle$(function(){varchart=newHighcharts.Chart({chart:{renderTo:'container'},xAxis:{categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']},series:[{data:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.

  10. javascript - 尝试使用 webpack 开发服务器路由带有点的 URL 导致 404 - 2

    我正在使用Webpack的devserver方便本地发展。我正在开发一个单页应用程序，所以我启用了historyApiFallback:common.devServer={outputPath:path.join(__dirname,'www',outDir),historyApiFallback:true};但是，每当我尝试浏览到包含句点的url(例如/ui/alerts/map.postplay)时，我都会得到CannotGET/ui/alerts/map.postplay我怎样才能说服webpack-dev-server让我使用这些url？ 最佳答案

随机推荐