类似网易新闻首页的轮播图,写了个自创的框架

本文介绍了一个简单的ViewPager轮播图实现教程,包括UI布局、图片加载、点击跳转等功能,并提供了一个小型Demo作为示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、 首先写个UI,copy那个220dip的Relatelayout到你的工程中

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="mrzhou.com.viewpager_demo.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="220dip">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dip"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="#66000000"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingTop="5dip"
                android:singleLine="true"
                android:text="此图无描述..."
                android:textColor="#fff"/>

            <LinearLayout
                android:id="@+id/ll_point_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dip"
                android:gravity="center"
                android:orientation="horizontal">
            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>
</RelativeLayout>



2、然后配置一下权限,因为在点击图片的时候要跳转页面到网络上

<uses-permission android:name="android.permission.INTERNET"/>

3、把图片放到你的drawable目录下,(没有图片到下面地址下载,这个压缩包里面有几张图片)

并且到 这个地方下载  http://pan.baidu.com/s/1sl5n9lr     ,下载下来后

一个selector和两个shape的xml文件下载下来后放到drawable目录下

两个java文件放到你的工程src目录下



4、到这里基本差不多了,然后开始写主要代码了

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewpager;
    private TextView mTv;
    private LinearLayout mLl_point_container;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //去掉标题栏
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化轮播图
        init();

    }

    private void init() {
        ViewPager_utils viewPager = new ViewPager_utils(MainActivity.this);

        mViewpager = (ViewPager) findViewById(R.id.viewpager);
        mTv = (TextView) findViewById(R.id.tv);
        mLl_point_container = (LinearLayout) findViewById(R.id.ll_point_container);
        //点击图片,跳转的网页地址
        String[] url = {"http://baidu.com", "http://www.jd.com", "http://www.sina.com.cn/", "http://www.163.com/", "http://weixin.qq.com/"};

        viewPager.initView(mViewpager, mTv, mLl_point_container, url);

        //轮播图下面对应的简述
        String[] sub = new String[]{"巩俐不低俗,我就不能低俗", "扑树又回来啦!再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀"};
        
        //图片Id,尺寸宽度和高度  320dip:220dip 这么一个比值不容易失真
        int[] img = new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
        viewPager.initData(sub, img);

    }

}



ok,大功告成

跑一下




大概是这样,一个小Demo,如果要从网络下载图片的话,三级缓存下来然后调一下即可




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值