ViewPager与小圆点的联动效果

2024-03-03 22:32

本文主要是介绍ViewPager与小圆点的联动效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

创建圆点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"><solid android:color="#800000"/><corners android:radius="8dp"/></shape>

//创建布局

activtity_main.xml(相对布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.example.shenxuesong.rikao0913.MainActivity"><android.support.v4.view.ViewPagerandroid:layout_width="match_parent"android:layout_height="300dp"android:id="@+id/vp"android:layout_alignParentTop="true"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/tv"android:layout_marginTop="280dp"android:layout_marginLeft="20dp"android:textColor="#22f"/><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="40dp"android:id="@+id/ll"android:orientation="horizontal"android:layout_marginRight="-10dp"android:layout_marginTop="240dp"android:gravity="center"></LinearLayout>
</RelativeLayout>

或者用线性布局



<?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"><android.support.v4.view.ViewPagerandroid:layout_width="wrap_content"android:layout_height="200dp"android:id="@+id/vp"android:layout_marginTop="10dp"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/tv"android:layout_marginTop="-40dp"android:layout_marginLeft="20dp"android:textColor="#22f"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="40dp"android:gravity="center"android:id="@+id/ll"android:orientation="horizontal"android:layout_marginTop="-35dp"></LinearLayout><!-- <me.maxwin.view.XListViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="80dp"android:id="@+id/xlv"></me.maxwin.view.XListView>--></LinearLayout>


item.xml

<?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">
<Viewandroid:layout_width="8dp"android:layout_height="8dp"android:layout_margin="10dp"android:id="@+id/view"android:background="@drawable/shape1"/>
</LinearLayout>


//universal_Imager_Loader 请求网络图片

 

public class MyApplicationextendsApplication { 

@Override

    public void onCreate() {super.onCreate();ImageLoaderConfiguration config=new ImageLoaderConfiguration.Builder(this).build();ImageLoader.getInstance().init(config);}
}

//AndroidMianfest.xml中配置权限

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.shenxuesong.rikao0913">
<uses-permission android:name="android.permission.INTERNET"/>
<application
    android:allowBackup="true"
    android:name=".MyApplication"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/Theme.AppCompat.Light"><activity android:name=".MainActivity"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity>
</application></manifest>




//具体的方法操作

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;import com.google.gson.Gson;
import com.nostra13.universalimageloader.core.ImageLoader;import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;public class MainActivity extends AppCompatActivity {private static final String surl="https://api.tianapi.com/wxnew/?key=8d6e3228d25298f13af4fc40ce6c9679&num=6&page=1";private List<JavaBean.NewslistBean> newslist;private List<View> dolist=new ArrayList<View>();private List<String> str=new ArrayList<String>();private List<ImageView> imagelist=new ArrayList<ImageView>();private ViewPager vp;private LinearLayout ll;private int current=0;private int old_list=0;private TextView tv;private Handler h=new Handler(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);if(msg.what==1){int i=msg.arg1;//设置viewpager的位置vp.setCurrentItem(i);// 设置图片的标题tv.setText(str.get(i%imagelist.size()));//设置圆点与图片的联动dolist.get(old_list).setBackgroundResource(R.drawable.shape1);dolist.get(i%imagelist.size()).setBackgroundResource(R.drawable.shape2);old_list=i%imagelist.size();}}};protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//查找IDvp=(ViewPager)findViewById(R.id.vp);ll=(LinearLayout)findViewById(R.id.ll);tv=(TextView)findViewById(R.id.tv);//获取图片的路径及biatigetPricUrLandTitle();}private void getPricUrLandTitle() {//异步任务new AsyncTask<String,Integer,String>(){@Overrideprotected String doInBackground(String... strings) {String str="";try {URL url = new URL(surl);HttpURLConnection http=(HttpURLConnection) url.openConnection();int code = http.getResponseCode();if(code==200){InputStream in = http.getInputStream();byte[] b=new byte[1024];int len=0;while((len=in.read(b))!=-1){str+=new String(b,0,len);}}} catch (MalformedURLException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}return str;}@Overrideprotected void onPostExecute(String s) {super.onPostExecute(s);Gson gson = new Gson();newslist = gson.fromJson(s, JavaBean.class).getNewslist();for (int i=0;i<newslist.size();i++){JavaBean.NewslistBean newslistBean = newslist.get(i);String picUrl = newslistBean.getPicUrl();String title = newslistBean.getTitle();Log.i("TAG",picUrl);//获取网络请求的图片数据,并把它添加到imagelist中getImageView(picUrl);//得到圆点getYuanDian();//标题str.add(title);}//执行的方法init();}}.execute();}private void getImageView(String picUrl) {ImageView imageView = new ImageView(MainActivity.this);imageView.setScaleType(ImageView.ScaleType.FIT_XY);ImageLoader.getInstance().displayImage(picUrl,imageView);imagelist.add(imageView);}private void getYuanDian() {View view = LayoutInflater.from(this).inflate(R.layout.item, null);View imageview = view.findViewById(R.id.view);//不懂dolist.add(imageview);ll.addView(view);}private void init() {//设置适配器vp.setAdapter(new PagerAdapter() {@Overridepublic int getCount() {return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {View imageView = imagelist.get(position % imagelist.size());container.addView(imageView);return imageView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}});//设置圆点的第一个被选中dolist.get(0).setBackgroundResource(R.drawable.shape2);//设置viewpager的当前位置vp.setCurrentItem(50000000);//启动定时器Timer timer = new Timer();timer.schedule(new TimerTask() {@Overridepublic void run() {current=vp.getCurrentItem()+1;Message msg = Message.obtain();msg.arg1=current;msg.what=1;h.sendMessage(msg);}}, 3000, 2000);}}





这篇关于ViewPager与小圆点的联动效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/771124

相关文章

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用(关键)2. InteractionSource3.

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后

uniapp小程序中实现无缝衔接滚动效果代码示例

《uniapp小程序中实现无缝衔接滚动效果代码示例》:本文主要介绍uniapp小程序中实现无缝衔接滚动效果的相关资料,该方法可以实现滚动内容中字的不同的颜色更改,并且可以根据需要进行艺术化更改和自... 组件滚动通知只能实现简单的滚动效果,不能实现滚动内容中的字进行不同颜色的更改,下面实现一个无缝衔接的滚动

Java实现图片淡入淡出效果

《Java实现图片淡入淡出效果》在现代图形用户界面和游戏开发中,**图片淡入淡出(FadeIn/Out)**是一种常见且实用的视觉过渡效果,它可以用于启动画面、场景切换、轮播图、提示框弹出等场景,通过... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

Flutter实现文字镂空效果的详细步骤

《Flutter实现文字镂空效果的详细步骤》:本文主要介绍如何使用Flutter实现文字镂空效果,包括创建基础应用结构、实现自定义绘制器、构建UI界面以及实现颜色选择按钮等步骤,并详细解析了混合模... 目录引言实现原理开始实现步骤1:创建基础应用结构步骤2:创建主屏幕步骤3:实现自定义绘制器步骤4:构建U

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用