如何为一个屏幕制作多个布局?

时间:2017-11-18 20:59:23

标签: android android-layout

我想在Android中使用多种布局制作Screen。 Fox示例在屏幕的顶部有一个带有图像滑块的标题(这部分已经完成),下面会有一个列表视图,下面会有网格视图。

Activitymain.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.root.multipleview.MainActivity">

    <!--Header image-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoStart="true"></android.support.v4.view.ViewPager>

    <!--ListView Below header -->
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:height="10dp" />

</RelativeLayout>

CustomLayout.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:background="#f1f3f7"
    android:orientation="vertical">

    <!--Header image with slider-->
    <ImageView
        android:id="@+id/headerimg"
        android:layout_width="fill_parent"
        android:layout_height="180dp"
        android:scaleType="centerCrop"
        android:layout_marginTop="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        android:src="@mipmap/ic_launcher" />

    <!--ListView Below Header-->
    <RelativeLayout
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="1"
        android:layout_marginTop="20dp"
        android:paddingLeft="2dp">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="90dp"
            android:layout_weight="0.05"
            app:srcCompat="@mipmap/ic_launcher"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:gravity="center"/>

        <TextView
            android:id="@+id/textName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="40dp"
            android:layout_marginStart="40dp"
            android:layout_marginTop="11dp"
            android:layout_toEndOf="@+id/imageView"
            android:layout_toRightOf="@+id/imageView"
            android:text="TextView" />

        <TextView
            android:id="@+id/textdesc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_marginBottom="20dp"
            android:layout_alignBottom="@+id/imageView"
            android:layout_alignLeft="@+id/textName"
            android:layout_alignStart="@+id/textName"/>

    </RelativeLayout>
</LinearLayout>

ListView.java

    package com.example.root.multipleview;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by root on 11/18/2017.
 */

public class ListView extends AppCompatActivity {
    int[] Images = {R.drawable.salad,R.drawable.salami,R.drawable.flour,R.drawable.salt,
            R.drawable.sandwich,R.drawable.sausage,R.drawable.seeds,R.drawable.cheese,R.drawable.shrimp,R.drawable.cupcake,R.drawable.cup,R.drawable.spices,R.drawable.cabbage
            ,R.drawable.spoon,R.drawable.apple,R.drawable.asparagus,R.drawable.cupcake,R.drawable.fish,R.drawable.corn,R.drawable.cupcake,R.drawable.spatula,R.drawable.olives
            ,R.drawable.garlic,R.drawable.taco,R.drawable.broccoli,R.drawable.cabbage};

    String[] Names = {"a","B","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"};

    String[] Description = {"VVV","DDD","ddd","dddsa","ddsdsds","zsxx","wwwwq","ddwqK","EQWK","FgggFFF","FFFkklF","FghhFFF","FFhhFF","FFhhFF",
            "FFmmmFF","FgggFFF","FFFFbbb","FFFFfeee","gfffFFFF","FFFFfff","FFFgffF","FFFFfgffg","FFFfgfgfF","FFFgffF","FFFgfggdF","FFFFdssa"};

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

        android.widget.ListView listView= (android.widget.ListView) findViewById(R.id.listView);

        CustomAdapter customAdapter = new CustomAdapter();

        listView.setAdapter(customAdapter);
    }

    public class CustomAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return Images.length;
        }

        @Override
        public Object getItem(int i) {

            return null;
        }

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

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            view = getLayoutInflater().inflate(R.layout.custom_layout,null);

            ImageView imageView = (ImageView)view.findViewById(R.id.imageView);
            TextView textView_N = (TextView)view.findViewById(R.id.textName);
            TextView textView_D = (TextView)view.findViewById(R.id.textdesc);

            imageView.setImageResource(Images[i]);
            textView_N.setText(Names[i]);
            textView_D.setText(Description[i]);

            return view;
        }
    }
}

MainActivity.java

    package com.example.root.multipleview;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;

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

        viewPager = (ViewPager)findViewById(R.id.viewPager);

        ViewPageAdapter viewPageAdapter = new ViewPageAdapter( this);

        viewPager.setAdapter(viewPageAdapter);
    }
}

ViewPageAdapter

    package com.example.root.multipleview;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

/**
 * Created by root on 11/18/2017.
 */

public class ViewPageAdapter extends PagerAdapter{
    private Context context;
    private LayoutInflater layoutInflater;
    private Integer[] images = {R.drawable.b,R.drawable.c,R.drawable.e,R.drawable.j,R.drawable.r,R.drawable.x,R.drawable.y};

    public  ViewPageAdapter(Context context){this.context = context;}
    @Override
    public int getCount() {
        return images.length;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        layoutInflater =(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View view = layoutInflater.inflate((R.layout.custom_layout), null);

        ImageView imageView = (ImageView) view.findViewById(R.id.headerimg);
        imageView.setImageResource((images[position]));

        ViewPager vp = (ViewPager) container;

        vp.addView(view, 0);
        return  view;
    }

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

当我单独检查所有布局时,它可以工作,但在添加一个布局后,它无法正常工作。输出截图已添加

enter image description here

1 个答案:

答案 0 :(得分:1)

  

如何为一个屏幕制作多个布局?

我实现此目标的方法是使用片段

如何?

我确实制作了一个main_layout并设置了一个 FrameLayout ,以便放置具有不同布局的片段。所以我有一个不同布局的屏幕。

这是我对你问题的最佳答案。