代碼部分:
part1:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="演示輪播圖"
android:onClick="showGuidance"/>
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="演示ListView"
android:textAllCaps="false"
android:onClick="showListView"/>
<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="演示GridView"
android:textAllCaps="false"
android:onClick="showGridView"/>
</LinearLayout>
效果圖:
activity_guidance.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
效果圖:
guidance_button_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#03AEFB"></solid>
<corners android:radius="25dp"></corners>
</shape>
效果圖:
guidance_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_guidance"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/guidance1"/>
<RadioGroup
android:id="@+id/rg_guidance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp">
</RadioGroup>
<Button
android:id="@+id/b_guidance"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="開啓學習之旅"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:textStyle="bold"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp"
android:background="@drawable/guidance_button_shape"
android:visibility="gone"/>
</RelativeLayout>
效果圖:
guidance1.png
guidance2.png
guidance3.png
GuidanceAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import java.util.List;
public class GuidanceAdapter extends PagerAdapter {
private List<Integer> data;
private Context context;
private LayoutInflater inflater;
public GuidanceAdapter(List<Integer> data, Context context) {
this.data = data;
this.context = context;
inflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return data.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
//1.獲取視圖和控件
View view = inflater.inflate(R.layout.guidance_item, null);
ImageView imageView = view.findViewById(R.id.iv_guidance);
RadioGroup radioGroup = view.findViewById(R.id.rg_guidance);
Button button = view.findViewById(R.id.b_guidance);
//2.給組件賦值
imageView.setImageResource(data.get(position));
for (int i = 0; i < data.size(); i++) {
//當判斷是最後一條數據時:隱藏RadioGroup,顯示Button
if (position == (data.size()-1)) {
radioGroup.setVisibility(View.GONE);
button.setVisibility(View.VISIBLE);
continue;
} else {
//當判斷不是最後一條數據
RadioButton radioButton = new RadioButton(context);
if (i == position) {
radioButton.setChecked(true);
}
radioGroup.addView(radioButton);
}
}
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, "開始新徵程", Toast.LENGTH_SHORT).show();
}
});
//3.將item添加到視圖容器中去
container.addView(view);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
}
GuidanceActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class GuidanceActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guidance);
//引導圖數據
List<Integer> data = new ArrayList<>();
data.add(R.drawable.guidance1);
data.add(R.drawable.guidance2);
data.add(R.drawable.guidance3);
//初始化ViewPager
ViewPager viewPager = findViewById(R.id.viewPager);
GuidanceAdapter adapter = new GuidanceAdapter(data, this);
viewPager.setAdapter(adapter);
}
}
效果圖:
part2:
activity_course.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@null"/>
</RelativeLayout>
效果圖:
Course.java
public class Course {
private int image;
private String name;
private String intro;
private double price;
private double oldPrice;
private int studyPerson;
public Course(int image, String name, String intro, double price, double oldPrice, int studyPerson) {
this.image = image;
this.name = name;
this.intro = intro;
this.price = price;
this.oldPrice = oldPrice;
this.studyPerson = studyPerson;
}
public String getIntro() {
return intro;
}
public void setIntro(String intro) {
this.intro = intro;
}
public int getImage() {
return image;
}
public void setImage(int image) {
this.image = image;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public double getOldPrice() {
return oldPrice;
}
public void setOldPrice(double oldPrice) {
this.oldPrice = oldPrice;
}
public int getStudyPerson() {
return studyPerson;
}
public void setStudyPerson(int studyPerson) {
this.studyPerson = studyPerson;
}
}
course_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp"></corners>
<stroke android:color="#BBBBBB"></stroke>
<solid android:color="#F5F9FC"></solid>
</shape>
效果圖:
course_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="140dp"
android:minHeight="140dp">
<ImageView
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="120dp"
android:src="@drawable/study1"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"/>
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="大自然界"
android:textSize="16sp"
android:textColor="#101010"
android:textStyle="bold"
android:layout_marginTop="10dp"
android:layout_toRightOf="@id/image"
android:layout_marginLeft="10dp" />
<TextView
android:id="@+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="大自然很新奇"
android:layout_below="@id/name"
android:layout_alignLeft="@id/name"
android:layout_marginTop="5dp"
android:textSize="12sp"
android:textColor="#999999"/>
<TextView
android:id="@+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¥19.9"
android:layout_below="@id/intro"
android:layout_alignLeft="@id/intro"
android:layout_marginTop="5dp"
android:textSize="24sp"
android:textColor="#FF5942"
android:textStyle="bold"/>
<TextView
android:id="@+id/oldPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¥300"
android:layout_toRightOf="@id/price"
android:layout_alignBottom="@id/price"
android:layout_marginLeft="10dp"
android:textSize="12sp"
android:textColor="#C7C7C7"/>
<TextView
android:id="@+id/studyPerson"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10000人在學習"
android:layout_below="@id/price"
android:layout_alignLeft="@id/price"
android:layout_marginTop="5dp"
android:textSize="12sp"
android:textColor="#999999"
android:textStyle="bold"
android:background="@drawable/course_shape"
android:padding="6dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#EFEFEF"
android:layout_alignParentBottom="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"/>
</RelativeLayout>
效果圖:
study1.png
study2.png
study3.png
CourseAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class CourseAdapter extends BaseAdapter {
private List<Course> data;
private Context context;
private LayoutInflater inflater;
public CourseAdapter(List<Course> data, Context context) {
this.data = data;
this.context = context;
this.inflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return data.size();
}
@Override
public Object getItem(int position) {
return data.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.course_item, null);
viewHolder = new ViewHolder();
viewHolder.image = convertView.findViewById(R.id.image);
viewHolder.name = convertView.findViewById(R.id.name);
viewHolder.intro = convertView.findViewById(R.id.intro);
viewHolder.price = convertView.findViewById(R.id.price);
viewHolder.oldPrice = convertView.findViewById(R.id.oldPrice);
viewHolder.studyPerson = convertView.findViewById(R.id.studyPerson);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
Course course = data.get(position);
viewHolder.image.setImageResource(course.getImage());
viewHolder.name.setText(course.getName());
viewHolder.price.setText("¥" + course.getPrice());
viewHolder.oldPrice.setText("¥" + course.getOldPrice());
viewHolder.studyPerson.setText(course.getStudyPerson() + "人已參與學習");
return convertView;
}
class ViewHolder {
public ImageView image;
public TextView name;
public TextView intro;
public TextView price;
public TextView oldPrice;
public TextView studyPerson;
}
}
CourseActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;
public class CourseActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_course);
//構建數據
List<Course> data = new ArrayList<>();
//public Course(int image, String name, String intro, double price, double oldPrice, int studyPerson) {
Course course = new Course(R.drawable.study1, "大自然", "大自然很神祕,充滿新奇", 30, 60, 1000);
data.add(course);
Course course1 = new Course(R.drawable.study2, "大自然", "大自然很神祕,充滿新奇", 30, 60, 1000);
data.add(course1);
Course course2 = new Course(R.drawable.study3, "大自然", "大自然很神祕,充滿新奇", 30, 60, 1000);
data.add(course2);
//初始化ListView
ListView listView = findViewById(R.id.listView);
CourseAdapter adapter = new CourseAdapter(data, this);
listView.setAdapter(adapter);
}
}
效果圖:
part3:
MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
/**
* 演示引導圖
* @param view
*/
public void showGuidance(View view) { //參數是固定
Intent intent = new Intent(MainActivity.this, GuidanceActivity.class);
startActivity(intent);
}
/**
* 演示ListView
* @param view
*/
public void showListView(View view) { //參數是固定
Intent intent = new Intent(MainActivity.this, CourseActivity.class);
startActivity(intent);
}
/**
* 演示GridView
* @param view
*/
public void showGridView(View view) { //參數是固定
Intent intent = new Intent(MainActivity.this, GridViewDemoActivity.class);
startActivity(intent);
}
}
activity_grid_view_demo.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:background="#000000"
android:minWidth="180dp"
android:verticalSpacing="20dp"
android:horizontalSpacing="20dp"/>
</RelativeLayout>
效果圖:
Demo.java
public class Demo {
private int image;
private String name;
private String intro;
private double price;
public Demo(int image, String name, String intro, double price) {
this.image = image;
this.name = name;
this.intro = intro;
this.price = price;
}
public int getImage() {
return image;
}
public void setImage(int image) {
this.image = image;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getIntro() {
return intro;
}
public void setIntro(String intro) {
this.intro = intro;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
}
guidance_button_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"></corners>
<solid android:color="#FFFFFF"></solid>
</shape>
效果圖:
demo_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="180dp"
android:layout_height="250dp"
android:background="@drawable/demo_shape">
<ImageView
android:id="@+id/image"
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/sofa"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="懶人沙發"
android:textSize="14sp"
android:textColor="#222222"
android:textStyle="bold"
android:layout_below="@id/image"
android:layout_marginTop="10dp"
android:layout_alignLeft="@id/image"/>
<TextView
android:id="@+id/intro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="單人沙發/扶手椅, 威索爾 深灰色, 卡布薩 深灰色"
android:layout_below="@id/name"
android:layout_marginTop="5dp"
android:layout_alignLeft="@id/name"
android:textSize="12sp"
android:textColor="#BFBFBF"/>
<TextView
android:id="@+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¥699"
android:textSize="16sp"
android:textColor="#404040"
android:layout_below="@id/intro"
android:layout_marginTop="5dp"
android:layout_alignLeft="@id/intro"/>
<ImageButton
android:id="@+id/cartButton"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/bag"
android:layout_alignBottom="@id/price"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"/>
</RelativeLayout>
效果圖:
sofa.png
bag.png
DemoAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class DemoAdapter extends BaseAdapter {
private List<Demo> data;
private Context context;
private LayoutInflater inflater;
public DemoAdapter(List<Demo> data, Context context) {
this.data = data;
this.context = context;
this.inflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return data.size();
}
@Override
public Object getItem(int position) {
return data.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.demo_item, null);
viewHolder = new ViewHolder();
viewHolder.image = convertView.findViewById(R.id.image);
viewHolder.name = convertView.findViewById(R.id.name);
viewHolder.intro = convertView.findViewById(R.id.intro);
viewHolder.price = convertView.findViewById(R.id.price);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
Demo demo = data.get(position);
viewHolder.image.setImageResource(demo.getImage());
viewHolder.name.setText(demo.getName());
viewHolder.intro.setText(demo.getIntro());
viewHolder.price.setText("¥" + demo.getPrice());
return convertView;
}
class ViewHolder {
public ImageView image;
public TextView name;
public TextView intro;
public TextView price;
}
}
GridViewDemoActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;
import java.util.ArrayList;
import java.util.List;
public class GridViewDemoActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid_view_demo);
//構建數據
List<Demo> data = new ArrayList<>();
//public Demo(int image, String name, String intro, double price) {
Demo demo = new Demo(R.drawable.sofa, "懶人沙發", "專門爲懶人定製的一款非常舒服的沙發", 200);
data.add(demo);
data.add(demo);
data.add(demo);
data.add(demo);
data.add(demo);
//初始化GridView
GridView gridView = findViewById(R.id.gridView);
DemoAdapter adapter = new DemoAdapter(data, this);
gridView.setAdapter(adapter);
}
}