山东大学-创新实训-地图圈系统

社区界面的实现

想做的效果是一个类似QQ空间的效果

1.布局

使用的是AppBarLayout+CollapsingToolbarLayout+Toolbar的布局，这样可以做到类似渐变加标题栏的效果

    <androidx.coordinatorlayout.widget.CoordinatorLayout android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="248dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            >
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:contentScrim="#ffffff"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp">

                <ImageView
                    android:id="@+id/detail_page_image"
                    android:layout_width="match_parent"
                    android:layout_height="248dp"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    android:src="@drawable/yellowmountain"
                    app:layout_collapseMode="parallax" />


                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    app:navigationIcon="@mipmap/liebiao"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:layout_collapseMode="pin" >

                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>
        <androidx.core.widget.NestedScrollView
            android:id="@+id/nestedscrollview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <com.example.mymap.Dao.NestedListView
                android:id="@+id/lv_main"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:listSelector="@android:color/transparent"

                />
        </androidx.core.widget.NestedScrollView>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

在Java中，调用和显示：

Toolbar toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);
((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
setHasOptionsMenu(true);
CollapsingToolbarLayout collapsingToolbar =
    (CollapsingToolbarLayout) rootView.findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("动态");
collapsingToolbar.setCollapsedTitleTextColor(Color.rgb(0,0,0));

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.menu, menu);
}
@Override
//当菜单被选择的时候,在OnOptionsItemSelected()方法中实现.
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.action_setting3:
            Intent intent=new Intent(getActivity(), ShareActivity.class);
            startActivity(intent);
            break;
        default:
            break;
    }
    return super.onOptionsItemSelected(item);
}

2.布局改进

加上下拉刷新的功能

使用swiperefreshlayout来实现

在swiperefreshlayout中嵌套进入CoordinatorLayout，即在最外层放入swiperefreshlayout

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:addStatesFromChildren="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <androidx.coordinatorlayout.widget.CoordinatorLayout 
    ...
    </androidx.coordinatorlayout.widget.CoordinatorLayout>


</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

由于SwipeRefreshLayout会与NestedScrollView的滑动冲突，所以可以进行判断来解决二者的滑动冲突，具体解决方法可以看下一篇文章

3.在自定义listview中添加每个动态的布局

（使用自定义的listview，是为了解决listview和NestedScrollView的冲突问题）

<?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"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/iv_headimage"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="15dp"
            android:layout_marginBottom="8dp" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:orientation="vertical">
            <TextView
                android:id="@+id/tv_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:textColor="#000000"
                android:textSize="20sp"
                android:text="baby"/>
                <TextView
                    android:id="@+id/item_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="5dp"
                    android:text="1分钟前"/>
        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv_content"
            android:layout_marginLeft="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="10dp"
            android:textColor="#000000"
            android:textSize="20sp"
            android:text="一波颜如玉"/>
        <com.example.mymap.Layout.NineGridlayout
            android:id="@+id/iv_ngrid_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginLeft="15dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp">
        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@mipmap/daohang"/>
        <TextView
            android:id="@+id/tv_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text=""/>
    </LinearLayout>
    
    <include
        layout="@layout/boo"></include>

</LinearLayout>

boo.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="15dp"
    android:layout_marginBottom="15dp"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:id="@+id/outside"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"

        android:orientation="horizontal">

        <ImageView
            android:id="@+id/dianzan"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/dianzan_no"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:gravity="left|center"
            android:text="1006"
            android:textSize="13sp"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/collect_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/outside"
        android:layout_marginLeft="25dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/pinglun"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:src="@mipmap/pinglun"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:gravity="left|center"
            android:text="1004"
            android:textSize="13sp"/>

    </LinearLayout>

</RelativeLayout>

4.图片的显示

使用的是九宫格NineGridlayout

具体使用方法可以百度

5.自定义的adapter

来完成数据和图像的加载

6.效果展示

下拉刷新效果：