Android Studio导入第三方包(资源)方法,ViewPager+TabLayout的使用,ViewPager单独使用实现无限循环

本文详细介绍如何使用 ViewPager 和 TabLayout 实现页面切换效果,并探讨回调函数的应用及第三方资源包的引入方法。

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

工作内容:

1.再次熟悉回调函数

2.ViewPager的使用(ViewPager单独使用实现无限循环)

3.Android第三方包(资源的引入)

学习分享:

1.回调函数的使用请参考之前的文章,【主要是(接口A)你在Activity中使用类B中的方法(传递接口A的实现类的对象进该方法),B中方法参数(A a),使用a的方法去做式,这里的a的方法使用的就是在Activity中实现的方法,也就是说,调用a的方法实际是调用了B中的实现方法】

2.ViewPager+TabLayout的使用步骤如下

xml中使用

<android.support.design.widget.TabLayout
    android:id="@+id/tl_home"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/orange"
    app:tabSelectedTextColor="@color/orange"
    app:tabTextColor="@color/deepskyblue"
    app:tabGravity="fill"  //tabGravity = “fill” 与 tabMode="fixed" 联合使“标题”可以平分TabLayout的宽度(不够则挤压)
    app:tabMode="fixed"	//属性设置成scrollable时,标题栏很多的情况可以滑动
    android:fillViewport="false"
    ></android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/vp_home">
</android.support.v4.view.ViewPager>

java文件(PagerAdapter——ViewPager必须配置)

import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by Administrator on 2016/8/30.
 */
public class PagerAdapter_all extends android.support.v4.view.PagerAdapter {
    private List<View> viewList;
    private List<String> titles;
    //没有标题栏的时候用【单一的ViewPager    public PagerAdapter_all(List<View> viewList){
        this.viewList = viewList;
    }
    //要用标题栏的时候用【与TabLayout联合使用】
    public PagerAdapter_all(List<View> viewList, List<String> titles){
        this.viewList = viewList;
        this.titles = titles;
    }
    /**
     * 显示的页面数
     * @return
     */
    @Override
    public int getCount() {
        return viewList.size();
    }

    /**
     * 来判断显示的是否是同一张图片,这里我们将两个参数相比较返回即可
     * @param view
     * @param object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    /**
     * 实例化项(View添加到父容器)
     * @param container 父容器(ViewPager     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position),0);    //暂时只能写0
        return viewList.get(position);
    }

    /**
     * 销毁page(从父容器中清楚view     * @param container 父容器(ViewPager     * @param position       * @param object
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }
    //添加标题栏的时候使用【TabLayout做标题栏时】
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

java文件(Activity)(这段代码与上面的适配器不匹配,仅供参考)

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;
import test.android.com.testapplication.adapter.MyPagerAdapter;

public class DrawerLayoutDemoActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private List<View> views;
    private List<String> titles;
    private MyPagerAdapter adapter;
    private ViewPager vp;
    private TabLayout tab;
    private ImageView iv;
    private int [] imgIDs = {R.drawable.a111,R.drawable.a112,R.drawable.a113,R.drawable.a114,R.drawable.a115
            ,R.drawable.a116};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_layout_demo);
        initView();
        initData();
    }

    private void initData() {
        views = new ArrayList<>();
        titles = new ArrayList<>();
        for (int i = 0; i < imgIDs.length ; i++) {
            iv = new ImageView(this);
            iv.setVisibility(View.VISIBLE);
            iv.setBackgroundResource(imgIDs[i]);
            views.add(iv);      //添加viewPagerView数据
            titles.add("标题"+i); //添加标题
        }
        adapter = new MyPagerAdapter(views,titles);
        vp.setAdapter(adapter);
        tab.setupWithViewPager(vp);
    }

    private void initView() {
        toolbar = (Toolbar)findViewById(R.id.toolbar_drawer);
        setToolbar();
        vp = (ViewPager)findViewById(R.id.vp_drawer);
        tab = (TabLayout)findViewById(R.id.tablayout_drawer);
    }

    private void setToolbar() {
        toolbar.setTitle("测试页面");   //标题
        toolbar.setTitleTextColor(Color.WHITE); //标题文字颜色
        toolbar.setSubtitle("八褂专家");    //副标题
        toolbar.setSubtitleTextColor(Color.WHITE);     //副标题文字颜色
        toolbar.setNavigationIcon(R.drawable.btn_return); //左边图标
        setSupportActionBar(toolbar);   //核心,设置为标题栏
        //设置标题栏左边图标的点击事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
    }
    //添加标题栏的menu(右边图标)
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_recy,menu);
        return super.onCreateOptionsMenu(menu);
    }
}

ViewPager单独使用实现左右无限循环:(与TabLayout一起使用会报错)

【第一个页面之前添加最后一个页面,最后一个页面之后添加第一个页面】



3.第三方包(资源框架等)引入步骤


<think>我们正在使用Vite + Vue3 + TypeScript环境。Vite默认使用ES模块(import/export)而不是CommonJS(require)。但是,有些第三方模块可能只提供了CommonJS格式,或者我们出于某些原因需要强制使用require来引入模块。 在Vite中,我们通常使用`import`来引入模块。但是,如果我们确实需要使用`require`,我们可以通过以下方式实现: 1. 使用`vite-plugin-commonjs`插件(或其他类似插件)来支持CommonJS模块。 2. 或者,我们可以使用动态导入(`import()`)来模拟require的行为,因为动态导入返回一个Promise,我们可以按需加载模块。 但是,请注意:Vite的设计理念是面向ES模块的,因此直接使用`require`在浏览器环境中是不可用的。在开发阶段,Vite会处理模块转换,但在生产构建时,Vite会使用Rollup进行打,Rollup也是基于ES模块的。 如果我们想要在代码中使用`require`,我们需要进行一些配置: 步骤1:安装`vite-plugin-require-transform`插件(或其他支持CommonJS的插件)来转换require调用。 例如,我们可以使用`vite-plugin-require`(注意:这个插件可能已经过时,或者有其他的替代品,请根据实际情况选择)。 但是,我注意到有一个名为`@originjs/vite-plugin-commonjs`的插件,它可以将CommonJS模块转换为ES模块。 步骤2:在`vite.config.ts`中配置插件。 步骤3:在代码中使用require,但要注意类型问题(因为TypeScript默认不认识require)。 另外,我们还需要在TypeScript中允许使用require。可以在`tsconfig.json`中设置`"module": "commonjs"`,但这会影响整个项目,不推荐。更好的做法是安装`@types/node`,这样TypeScript就能识别全局的require函数,同时保持模块为ES6。 具体步骤: 1. 安装必要的插件(以`@originjs/vite-plugin-commonjs`为例): ```bash npm install @originjs/vite-plugin-commonjs -D ``` 2. 在`vite.config.ts`中引入并配置插件: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import commonjs from '@originjs/vite-plugin-commonjs' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), commonjs({ // 配置选项,例如:include: ['node_modules/**'] }) ] }) ``` 3. 安装`@types/node`以获取Node.js的类型定义,这样TypeScript就不会报错: ```bash npm install @types/node -D ``` 4. 在代码中使用require: ```typescript const module = require('module-name') ``` 但是,请注意:使用require引入的模块在开发阶段会被插件转换,但并不是所有的模块都能完美转换。另外,这种方式可能会影响Vite的热更新速度和开发体验。 另外,我们也可以考虑使用动态导入import())来实现按需加载,这样更符合ES模块规范。例如: ```typescript import('module-name').then(module => { // 使用模块 }) ``` 或者,如果我们需要在模板中使用动态路径(比如图片),我们可以使用以下方法(不使用require): ```vue <script setup> import { ref, computed } from 'vue' const item = ref({ img: 'example.png' }) const imgUrl = computed(() => new URL(`../../../assets/image/${item.value.img}`, import.meta.url).href) </script> <template> <img :src="imgUrl" /> </template> ``` 总结:在Vite项目中,我们推荐使用ES模块的动态导入或URL构造的方式,而不是require。但如果必须使用require,我们可以通过配置插件来实现。 注意事项:使用require可能会带来一些问题,比如代码分割、Tree Shaking等,因此请谨慎使用。 相关问题: 1. 在Vite中如何动态引入图片资源? 2. Vite支持CommonJS模块吗? 3. 如何配置Vite插件以转换CommonJS模块? 4. 在TypeScript中如何解决require的报错问题?</think>在 Vite + Vue 3 + TypeScript 环境中强制使用 `require` 引入第三方模块,需要通过以下步骤实现: ### 解决方案 1. **安装必要依赖** ```bash npm install @types/node vite-plugin-commonjs -D ``` 2. **配置 `vite.config.ts`** ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import commonjs from 'vite-plugin-commonjs' // 引入插件 export default defineConfig({ plugins: [ vue(), commonjs({ filter(id) { // 强制转换指定模块 return ['axios', 'lodash'].includes(id) // 添加需要require的模块名 } }) ], build: { commonjsOptions: { transformMixedEsModules: true, // 强制转换ESM模块 include: [/node_modules/] // 含所有node_modules } } }) ``` 3. **配置 `tsconfig.json`** ```json { "compilerOptions": { "types": ["node"], // 识别require类型 "moduleResolution": "node", "allowJs": true // 允许CommonJS } } ``` 4. **使用 require 引入模块** ```typescript // 在.vue文件或.ts文件中 const axios = require('axios') const _ = require('lodash') ``` ### 关键原理 1. **`vite-plugin-commonjs` 插件**:将 CommonJS 模块转换为 ESM 格式,使 `require` 能在 Vite 环境工作[^1] 2. **构建配置**:`transformMixedEsModules` 强制混合模块转换 3. **TypeScript 类型**:`@types/node` 提供全局 `require` 的类型定义 4. **模块过滤**:精准控制需要转换的第三方,避免全局转换影响性能 > ⚠️ 注意事项:Vite 原生支持 ESM,强制使用 `require` 可能导致: > - Tree-shaking 失效 > - 热更新速度下降 > - 打体积增加 > 建议仅在处理**不支持 ESM 的老旧库**时使用此方案 ### 替代方案(推荐) 使用动态导入更符合 Vite 设计理念: ```typescript import('axios').then(module => { const axios = module.default }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值