android--(布局图文混排GridView、BaseAdapter适配器)

这里写图片描述

activity:
/**
 * 自定义适配器
 *
 * 1.创建一个类,继承BaseAdapter类
 * 2.实现4个方法
 *    getCount:获取要显示的选项总数
 *
 *    getItem :获取每一个选项,类情况而定
 *
 *    getItemId:获取每个选项的id
 *
 *    getView :该方法用来为每一个选项生成视图(这里为:ImageView),会多次调用
 *    根据屏幕能显示多少个选项而定的,所以每次屏幕滚动时,也会调用
 *
 */

public class MainActivity extends Activity {

    private GridView gridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

       gridView = (GridView) findViewById(R.id.gridView);

       gridView.setAdapter(new MyAdapter(this));
    }



    //自定义适配器
    static class MyAdapter extends BaseAdapter{

        private  Context context;
        public MyAdapter(Context context){

            this.context = context;
        }


        private int[] images = {R.mipmap.a,R.mipmap.b,
                R.mipmap.a,R.mipmap.b,R.mipmap.a,R.mipmap.b,
                R.mipmap.a,R.mipmap.b,R.mipmap.a,R.mipmap.b,
                R.mipmap.a,R.mipmap.b,R.mipmap.a,R.mipmap.b};


        //获取图片有多少个
        @Override
        public int getCount() {
            return images.length;
        }

        //每一个图片
        @Override
        public Object getItem(int position) {
            return images[position];
        }

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

        //给每一个item填充图片
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView iv = new ImageView(context);

            //每一张图片
            iv.setImageResource(images[position]);

            return iv;
        }
    }


2.xml:
 <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/gridView"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"

        android:numColumns="auto_fit"

        //列宽
        android:columnWidth="90dp"
        //垂直间距
        android:verticalSpacing="10dp"
        //水平间距
        android:horizontalSpacing="10dp"

        //拉申模式
        android:stretchMode="columnWidth"

        android:gravity="center"
        />

图文混排:
/**
 * 自定义适配器
 *
 * 1.创建一个类,继承BaseAdapter类
 * 2.实现4个方法
 *    getCount:获取要显示的选项总数
 *
 *    getItem :获取每一个选项,类情况而定
 *
 *    getItemId:获取每个选项的id
 *
 *    getView :该方法用来为每一个选项生成视图(这里为:ImageView),会多次调用
 *    根据屏幕能显示多少个选项而定的,所以每次屏幕滚动时,也会调用
 *
 */

public class MainActivity extends Activity {

    private GridView gridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

       gridView = (GridView) findViewById(R.id.gridView);

       gridView.setAdapter(new MyAdapter(this));


        //每个选项的单击处理事件
       gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
           @Override
           public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
               //parent : GridView
               //view :每一个选项的布局
               //position :每个选项所在位置
               //id :每个选项的id

               TextView tx = (TextView) view.findViewById(R.id.textView);
               Toast.makeText(MainActivity.this,tx.getText().toString(),Toast.LENGTH_SHORT).show();
           }
       });

    }



    //自定义适配器
    static class MyAdapter extends BaseAdapter{

        private  String[] names = {"查看","消失","金融","平安","红包","查看","消失","金融","平安","红包","查看","消失","金融","平安","红包","查看","消失","金融","平安","红包"};
        private  Context context;

        private int[] images = {R.mipmap.a,R.mipmap.b,
                R.mipmap.a,R.mipmap.b,R.mipmap.a,R.mipmap.b,
                R.mipmap.a,R.mipmap.b,R.mipmap.a,R.mipmap.b,
                R.mipmap.a,R.mipmap.b,R.mipmap.a,R.mipmap.b};

        public MyAdapter(Context context){

            this.context = context;
        }

        //获取图片有多少个
        @Override
        public int getCount() {
            return images.length;
        }

        //每一个图片
        @Override
        public Object getItem(int position) {
            return images[position];
        }

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

        //给每一个item填充图片
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            //得到布局接口
            LayoutInflater from = LayoutInflater.from(context);

            //得到另一个布局文件的view
            View view = from.inflate(R.layout.item, null);

            //得到布局的组件对象
            ImageView iv = (ImageView) view.findViewById(R.id.imageView);
            TextView tv = (TextView) view.findViewById(R.id.textView);

            //图文混排
            iv.setImageResource(images[position]);
            tv.setText(names[position]);


            //返回 view
            return view;
        }
    }
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三列布局图文混排可以用 HTML 和 CSS 来实现,下面是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <title>三列布局图文混排</title> <style> .container { display: flex; } .column { flex: 1; margin: 0 10px; } .image { max-width: 100%; height: auto; } </style> </head> <body> <div class="container"> <div class="column"> <img src="image1.jpg" alt="Image 1" class="image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nulla vitae felis convallis, vel porta eros tempus. Nullam scelerisque urna nec neque dapibus, at bibendum nisl imperdiet. </p> </div> <div class="column"> <img src="image2.jpg" alt="Image 2" class="image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nulla vitae felis convallis, vel porta eros tempus. Nullam scelerisque urna nec neque dapibus, at bibendum nisl imperdiet. </p> </div> <div class="column"> <img src="image3.jpg" alt="Image 3" class="image"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nulla vitae felis convallis, vel porta eros tempus. Nullam scelerisque urna nec neque dapibus, at bibendum nisl imperdiet. </p> </div> </div> </body> </html> ``` 在上面的示例中,我们使用了 `flex` 布局来实现三列布局。每一列都被设置为 `flex: 1`,这意味着它们将平均分配剩余的可用空间。同时,我们使用了 `margin` 属性来为每列之间添加一些间距。 每列包含一个图片和一段文本。图片被设置为最大宽度为100%,高度自适应。此外,我们还可以添加其他样式来美化布局,例如设置背景颜色、字体样式等等。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值