Android使用ViewPager+Gallery实现画廊

咱们先看一下效果

这一块就是利用了viewpager+Gallery实现的画廊效果,彼此之间进行相互联动。

接着咱们来看一下布局:

没什么太多的东西,只有这两个控件就ok了,然后我们需要给这两个控件去定义适配器

1.咱们先看viewpager的适配器

    private class MyPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return pics.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.pager_item, container, false);
            ImageView imageView = view.findViewById(R.id.pager_image);
            imageView.setImageResource(pics[position]);
            container.addView(view);
            currentPosition = position;
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

MyPagerAdapter 是继承自 PagerAdapter 的适配器,用于将图片资源数据展示在 ViewPager 内,实现图片轮播的效果。getCount() 方法返回数据的个数,isViewFromObject() 方法用于判断 View 是否属于由 instantiateItem(ViewGroup container, int position) 方法新增的 Object,如果一致则表示该 View 应该被显示;instantiateItem(ViewGroup container, int position) 方法根据 position 获取对应图片 View 并新增到 ViewPager 中,同时返回 View 以作缓存,destroyItem(ViewGroup container, int position, Object object) 方法移除并清空指定位置的 View,释放内存。

2.接着咱们来看一下Gallery的适配器

private class MyGalleryAdapter extends BaseAdapter {
        @Override
        public int getCount() {
            return pics.length;
        }

        @Override
        public Object getItem(int position) {
            return pics[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.gallery_item, parent, false);
            ImageView imageView = view.findViewById(R.id.gallery_image);
            imageView.setImageResource(pics[position]);

            return view;
        }
    }

MyGalleryAdapter 是继承自 BaseAdapter 的适配器,用于将图片资源数据展示在 Gallery 控件中,实现图片列表的效果。getCount() 方法返回数据的个数,getItem(int position) 方法返回 position 位置的数据;getView(int position, View convertView, ViewGroup parent) 方法根据 position 获取对应的图片 View 并填充数据,同时返回 View 以作缓存。

这两个步骤完成之后,对应的控件内容咱们就成功的放入就去了,那么接下来就是要让两者之间进行联动,从而实现更好的画廊效果:

Gallery 的 OnItemSelectedListener 监听器,在用户选择某个位置时,将当前的 ViewPager 的位置设为所选择位置,实现了 Gallery 与 ViewPager 的联动效果。

ViewPager 的 OnPageChangeListener 监听器,实现了 ViewPager 的滑动监听。在 ViewPager 滑动到新的页面时,根据当前页面的位置,将 Gallery 选中的位置设为相应的位置,保证 Gallery 与 ViewPager 的选中位置一致。同时,将当前页面的位置设为 currentPosition,以便在之后使用。

到这里一个完整的画廊功能就成功的实现了,是不是很简单啊。两个适配器中的item只需要放入图片控件就可以了。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Android TableLayout is a ViewGroup which displays the data in a tabular form. It is used to create a user interface with rows and columns similar to a spreadsheet. ViewPager is a View which allows the user to swipe left and right to navigate between pages. Fragments are reusable components which can be used to create dynamic user interfaces. To create a TableLayout with ViewPager and Fragment, follow the below steps: 1. Create a new Android Studio project. 2. Add the required dependencies in the build.gradle file. 3. Create a new Fragment class for each tab. 4. Create a layout file for each Fragment. 5. Create a new FragmentPagerAdapter class to manage the Fragments. 6. Create a layout file for the Activity which will contain the TableLayout and ViewPager. 7. Add the TableLayout and ViewPager to the layout file. 8. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter. 9. Create a new TabLayout and add it to the layout file. 10. Add the TabLayout to the ViewPager. Example code: 1. Add the dependencies in the build.gradle file: ``` dependencies { implementation 'com.google.android.material:material:1.4.0' implementation 'androidx.viewpager2:viewpager2:1.0.0' } ``` 2. Create a new Fragment class for each tab: ``` public class TabFragment extends Fragment { private int tabPosition; public TabFragment(int tabPosition) { this.tabPosition = tabPosition; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_tab, container, false); TextView textView = view.findViewById(R.id.tab_text); textView.setText(getString(R.string.tab_text, tabPosition + 1)); return view; } } ``` 3. Create a layout file for each Fragment: ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tab_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:textAppearanceLarge" /> </LinearLayout> ``` 4. Create a new FragmentPagerAdapter class to manage the Fragments: ``` public class TabAdapter extends FragmentStateAdapter { public TabAdapter(FragmentActivity activity) { super(activity); } @Override public Fragment createFragment(int position) { return new TabFragment(position); } @Override public int getItemCount() { return 3; } } ``` 5. Create a layout file for the Activity which will contain the TableLayout and ViewPager: ``` <?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"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> ``` 6. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter: ``` public class MainActivity extends AppCompatActivity { private ViewPager2 viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); } } ``` 7. Create a new TabLayout and add it to the layout file: ``` <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> ``` 8. Add the TabLayout to the ViewPager: ``` TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); ``` This will create a TableLayout with ViewPager and Fragment. The user can swipe left and right to navigate between tabs. Each tab will display a Fragment with a TextView showing the tab number.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值