美文网首页
按时间分类的自定义相册

按时间分类的自定义相册

作者: 秋枫叨叨 | 来源:发表于2017-09-22 10:52 被阅读85次

    按时间排序,图片视频混排的相册功能

    功能简介

    1. 添加图片:图片来源于拍照,或者视频截图
    2. 删除图片:
      • 主界面多项删除
      • 图片详情界面单项删除
    3. 图片展示:根据日期分类,视频和图片混合排版。图片会有手势功能,放大、缩小,移动等功能
    4. 分享功能:
      • 单项视频或者图片分享
      • 多项视频或者图片分享
    5. 详情:视频和图片的详情界面,左右滑动能实现图片或者视频的切换,适配屏幕横竖切换。视频包含播放,暂停,拖动进度条等功能

    界面Ui

    图片列表界面
    点击选择之后的界面 点击视频 点击图片

    主界面布局:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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"
        android:orientation="vertical"
        tools:context="com.chezi008.picturedemo.AlbumManageActivity">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorAccent">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="图像管理"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
    
            <TextView
                android:id="@+id/tvChoose"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="15dp"
                android:text="选择"
                android:textColor="@android:color/white"
                android:textSize="14sp" />
        </RelativeLayout>
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycleView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            tools:listitem="@layout/item_album"></android.support.v7.widget.RecyclerView>
    
        <LinearLayout
            android:id="@+id/llBottom"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="@color/colorGrey"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="gone">
    
            <ImageView
                android:id="@+id/ivDelete"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="10dp"
                android:src="@mipmap/album_ic_delete" />
    
            <ImageView
                android:id="@+id/ivShare"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="10dp"
                android:src="@mipmap/album_ic_share" />
        </LinearLayout>
    </LinearLayout>
    
    

    照片详情界面的布局代码

    <?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"
        android:orientation="vertical"
        tools:context="com.chezi008.picturedemo.viewpager.PreviewPhotosActivity">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:clickable="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></android.support.v4.view.ViewPager>
    
        <RelativeLayout
            android:id="@+id/rvTitle"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorAccent"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/ivBack"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/album_ic_back_white"
                android:padding="15dp"/>
            <TextView
                android:id="@+id/tvTitle"
                android:layout_centerInParent="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1/20"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </RelativeLayout>
        <LinearLayout
            android:id="@+id/llBottom"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="@color/colorGrey"
            android:orientation="horizontal"
            android:gravity="center">
            <ImageView
                android:id="@+id/ivDelete"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="10dp"
                android:src="@mipmap/album_ic_delete"/>
            <ImageView
                android:id="@+id/ivScreenShoot"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="10dp"
                android:visibility="gone"
                android:src="@mipmap/album_ic_screen_shoot"/>
            <ImageView
                android:id="@+id/ivShare"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="10dp"
                android:src="@mipmap/album_ic_share"/>
        </LinearLayout>
    
    </RelativeLayout>
    

    demo地址:

    相关文章

      网友评论

          本文标题:按时间分类的自定义相册

          本文链接:https://www.haomeiwen.com/subject/konxextx.html