안 드 로 이 드 모방 위 챗 모멘트 동적 지원 더 블 클릭 제스처 확대 및 미끄럼 보기 그림 효과

최근 에 실시 간 채 팅 과 동적 댓 글 기능 을 포함 한 여행 앱 개발 에 참 여 했 습 니 다.드디어 몇 달 동안 파트너 가 완 성 했 습 니 다.오늘 은 실시 간 채 팅 기능 에 대해 사용자 가 많 지 않 으 면 scoket 으로 실현 할 수 있 습 니 다.사용자 가 만 급 이면 오픈 소스 의 smack+opnefile 로 실현 할 수 있 고 mina 오픈 소스+XMP 로 어떻게 구축 하고 실현 할 수 있 는 지 요약 하 겠 습 니 다.현재 github 에서 검색 을 많이 했 을 것 입 니 다.인 스 턴 트 메 신 저 는 남 의 자 제 를 그 르 칠 까 봐 소 개 를 하지 않 고 이 루어 진 위 챗 모멘트 의 작은 기능 을 소개 하 겠 습 니 다.
   선행 효과 도:

주류 의 UI 수 요 를 얻 으 면 대체적으로 분석 해 보면 저 는 ListView 에 Gridview 를 내장 해 야 합 니 다.gridView 의 줄 수도 그림 총수 와 관계 가 있 기 때문에 개 수 를 통 해 우 리 는 항목 의 너비 와 높이 를 동태 적 으로 설정 할 수 있 습 니 다.그림 을 클릭 하면 우 리 는 다른 화면 으로 넘 어 갈 수 있 습 니 다.그림 의 좌우 미끄럼 은 viewpager 로 이 루어 질 수 있 습 니 다.사진 확대 와 손가락 크기 조정 사진 을 더 블 클릭 하면 감청 제스처 로 계속 확대 할 수 있 고 안 드 로 이 드 사건 에 익숙 하지 않 은 친 구 는 유명한 포 토 뷰 오픈 소스 프로젝트 를 직접 사용 하여 제스처 크기 조정 사진 과 미끄럼 사진 을 지원 하여 갤러리 기능 을 실현 할 수 있 으 며 메모리 유출 문 제 를 잘 해결 할 수 있다.
      ImageLoader 설정       
       이 프로젝트 에 네트워크 그림 을 불 러 오 면 저 는 imageLoader 를 직접 사용 하지만 원본 코드 를 보 는 것 을 권장 합 니 다.원본 프로젝트 자체 가 캐 시 체 제 를 가지 고 있 기 때문에 캐 시 기술 이 좋 고 참고 할 만 한 것 이 많 습 니 다.로 컬 그림(파일 path)을 불 러 올 수 있 을 뿐만 아니 라 네트워크 그림(url)을 불 러 올 수 있 으 며 메모리 넘 침 방지 기능 도 자체 적 으로 지원 합 니 다.

public class MyApplication extends Application { 
  @Override 
  public void onCreate() { 
    super.onCreate(); 
    DisplayImageOptions defaultOptions = new DisplayImageOptions 
        .Builder() 
        .showImageForEmptyUri(R.drawable.empty_photo)  
        .showImageOnFail(R.drawable.empty_photo)  
        .cacheInMemory(true) 
        .cacheOnDisc(true) 
        .build(); 
    ImageLoaderConfiguration config = new ImageLoaderConfiguration 
        .Builder(getApplicationContext()) 
        .defaultDisplayImageOptions(defaultOptions) 
        .discCacheSize(50 * 1024 * 1024)// 
        .discCacheFileCount(100)//        
        .writeDebugLogs() 
        .build(); 
    ImageLoader.getInstance().init(config); 
  } 
} 
 2.메 인 인터페이스 와 필요 한 기본 클래스 준비
  1  Listadapter

public class FridListAdapter extends BaseAdapter{ 
  private ArrayList<MyBean> mList; 
  private LayoutInflater mInflater; 
  private Context mContext; 
  public FridListAdapter(Context context,ArrayList<MyBean> list) { 
    mInflater = LayoutInflater.from(context); 
    mContext=context; 
    this.mList=list; 
  } 
  @Override 
  public int getCount() { 
    return mList==null?0:mList.size(); 
  } 
  @Override 
  public MyBean getItem(int position) { 
    return mList.get(position); 
  } 
  @Override 
  public long getItemId(int position) { 
    return getItem(position).id; 
  } 
  @Override 
  public View getView(int position, View convertView, ViewGroup parent) { 
    ViewHolder holder; 
    if (convertView == null) { 
      holder = new ViewHolder(); 
      convertView = mInflater.inflate(R.layout.list_item, null); 
      holder.avator=(ImageView)convertView.findViewById(R.id.avator); 
      holder.name=(TextView)convertView.findViewById(R.id.name); 
      holder.content = (TextView) convertView.findViewById(R.id.content); 
      holder.gridView=(NoScrollGridView)convertView.findViewById(R.id.gridView); 
      convertView.setTag(holder); 
    } else { 
      holder = (ViewHolder) convertView.getTag(); 
    } 
    final MyBean bean = getItem(position); 
    //       
    ImageLoader.getInstance().displayImage(bean.avator, holder.avator); 
    holder.name.setText(bean.name); 
    holder.content.setText(bean.content); 
    if(bean.urls!=null&&bean.urls.length>0){ 
      holder.gridView.setVisibility(View.VISIBLE); 
      holder.gridView.setAdapter(new DynamicGridAdapter(bean.urls, mContext)); 
      holder.gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { 
        @Override 
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) { 
          imageBrower(position,bean.urls); 
        } 
      }); 
    }else{ 
      holder.gridView.setVisibility(View.GONE); 
    } 
    return convertView; 
  } 
  private void imageBrower(int position, String[] urls) { 
    Intent intent = new Intent(mContext, ImagePagerActivity.class); 
    //   url,          ,              
    intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_URLS, urls); 
    intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_INDEX, position); 
    mContext.startActivity(intent); 
  } 
  //   listview 
  private static class ViewHolder { 
    public TextView name; 
    public ImageView avator; 
    TextView content; 
    NoScrollGridView gridView; 
  } 
}
  2  메 인 인터페이스
   실제 항목 에서 데 이 터 는 서버 에서 가 져 온 것 으로 이번 에는 네트워크 에서 만 그림 을 가 져 옵 니 다.

public class MainActivity extends ListActivity { 
  public static final String TAG = "MainActivity"; 
  private FridListAdapter mAdapter; 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    new LoderDataTask().execute(); 
  } 
  class LoderDataTask extends AsyncTask<Void, Void, MessageModle> { 
    @Override 
    protected MessageModle doInBackground(Void... params) { 
      Gson gson = new Gson(); 
      MessageModle msg = gson.fromJson(getData(), MessageModle.class); 
      return msg; 
    } 
    @Override 
    protected void onPostExecute(MessageModle result) { 
      mAdapter = new FridListAdapter(MainActivity.this, result.list); 
      setListAdapter(mAdapter); 
    } 
  } 
  private String getData() { 
    //          
    String json = "{\"code\":200,\"msg\":\"ok\",list:[" 
        + "{\"id\":110,\"avator\":\"http://img0.bdstatic.com/img/image/shouye/leimu/mingxing.jpg\",\"name\":\"  \",\"content\":\"     !\",\"urls\":[]}," 
        + "{\"id\":111,\"avator\":\"http://image.cnwest.com/attachement/jpg/site1/20110507/001372d8a36f0f2f4c953a.jpg\",\"name\":\"  \",\"content\":\"  \"," 
        + " \"urls\":[\"http://guangdong.sinaimg.cn/2015/0530/U11307P693DT20150530094310.jpg\"]}," 
        + "{\"id\":114,\"avator\":\"http://img.hexun.com/2009-05-01/117287830.jpg\",\"name\":\"   \",\"content\":\"      \",\"urls\":[" 
        + "\"http://g.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=ccd33b46d53f8794d7ff4b26e2207fc9/0d338744ebf81a4c0f993437d62a6059242da6a1.jpg\"," 
        + "\"http://f.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=6b62f61bac6eddc422e7b7f309e0c7c0/6159252dd42a2834510deef55ab5c9ea14cebfa1.jpg\"," 
        + "\"http://g.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=e58fb67bc8ea15ce45eee301863b4bce/a5c27d1ed21b0ef4fd6140a0dcc451da80cb3e47.jpg\"," 
        + "\"http://c.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=cdab1512d000baa1be2c44b3772bc82f/91529822720e0cf3855c96050b46f21fbf09aaa1.jpg\"]}," 
        + "{\"id\":112,\"avator\":\"http://img3.yxlady.com/yl/UploadFiles_5361/20150528/20150528050208705.jpg\",\"name\":\"  \",\"content\":\"     !     !\",\"urls\":[\"http://upload.cbg.cn/2015/0305/1425518659246.jpg\"," 
        + "\"http://www.people.com.cn/mediafile/pic/20150619/30/4179219540177204330.jpg\"]}," 
        + "{\"id\":113,\"avator\":\"http://img4.imgtn.bdimg.com/it/u=945108765,1070109457&fm=21&gp=0.jpg\",\"name\":\"   \",\"content\":\"holle\",\"urls\":[\"http://f.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=6b62f61bac6eddc422e7b7f309e0c7c0/6159252dd42a2834510deef55ab5c9ea14cebfa1.jpg\",\"http://g.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=e58fb67bc8ea15ce45eee301863b4bce/a5c27d1ed21b0ef4fd6140a0dcc451da80cb3e47.jpg\",\"http://c.hiphotos.bdimg.com/album/s%3D680%3Bq%3D90/sign=cdab1512d000baa1be2c44b3772bc82f/91529822720e0cf3855c96050b46f21fbf09aaa1.jpg\"]}]}"; 
    return json; 
  } 
  3 GridView 의 Adapter
     Listview 항목 에 Gridview 가 포함 되 어 있 기 때문에,여기에 atapter 를 만들어 야 합 니 다.
    adapter 는 기술 함량 이 많 지 않 기 때문에 중점 부분 을 열거 합 니 다.여기 서 우 리 는 적당 한 데이터 눈 총 수 를 판단 해 야 합 니 다.위 챗 의 최대 수 는 9 장 입 니 다.한 장 을 표시 할 때 그림 이 비교적 크 고 두 장 을 표시 할 때 약간 줄 어 듭 니 다.네 장 을 표시 할 때 두 열 두 줄 과 두 장의 크기 가 일치 합 니 다.다른 장 수 는 모두 3 행 3 열의 9 궁 격 입 니 다.

@Override 
  public View getView(int position, View convertView, ViewGroup parent) { 
    MyGridViewHolder viewHolder; 
    if (convertView == null) { 
      viewHolder = new MyGridViewHolder(); 
      convertView = mLayoutInflater.inflate(R.layout.gridview_item, 
          parent, false); 
      viewHolder.imageView = (ImageView) convertView 
          .findViewById(R.id.album_image); 
      convertView.setTag(viewHolder); 
    } else { 
      viewHolder = (MyGridViewHolder) convertView.getTag(); 
    } 
    String url = getItem(position); 
    if (getCount() == 1) { 
      viewHolder.imageView.setLayoutParams(new android.widget.AbsListView.LayoutParams(300, 250)); 
    } 
    if (getCount() == 2 ||getCount() == 4) { 
      viewHolder.imageView.setLayoutParams(new android.widget.AbsListView.LayoutParams(200, 200)); 
    } 
    ImageLoader.getInstance().displayImage(url, viewHolder.imageView); 
    return convertView; 
  } 
   4  구 궁 격 사용자 정의 지원 을 위 한 Gridview 를 새로 만 듭 니 다.

public class NoScrollGridView extends GridView { 
  public NoScrollGridView(Context context) { 
    super(context); 
  } 
  public NoScrollGridView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
  } 
  @Override 
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    int expandSpec = 0; 
    int size = getAdapter().getCount(); 
    if (size == 1) { 
      setNumColumns(1); 
    }  
    if ( size==2 || size == 4 ) { 
      setNumColumns(2); 
    } 
    else { 
      setNumColumns(3); 
    } 
    expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,MeasureSpec.AT_MOST); 
    super.onMeasure(widthMeasureSpec,expandSpec ); 
  } 
} 
그림 3 클릭 후 기본 클래스
   1 큰 그림 뷰 어 뷰 어 만 들 기

public class ImagePagerActivity extends FragmentActivity { 
  private static final String STATE_POSITION = "STATE_POSITION"; 
  public static final String EXTRA_IMAGE_INDEX = "image_index"; 
  public static final String EXTRA_IMAGE_URLS = "image_urls"; 
  private HackyViewPager mPager; 
  private int pagerPosition; 
  private TextView indicator; 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.image_detail_pager); 
    pagerPosition = getIntent().getIntExtra(EXTRA_IMAGE_INDEX, 0); 
    String[] urls = getIntent().getStringArrayExtra(EXTRA_IMAGE_URLS); 
    mPager = (HackyViewPager) findViewById(R.id.pager); 
    ImagePagerAdapter mAdapter = new ImagePagerAdapter( 
        getSupportFragmentManager(), urls); 
    mPager.setAdapter(mAdapter); 
    indicator = (TextView) findViewById(R.id.indicator); 
    CharSequence text = getString(R.string.viewpager_indicator, 1, mPager 
        .getAdapter().getCount()); 
    indicator.setText(text); 
    //      
    mPager.setOnPageChangeListener(new OnPageChangeListener() { 
      @Override 
      public void onPageScrollStateChanged(int arg0) { 
      } 
      @Override 
      public void onPageScrolled(int arg0, float arg1, int arg2) { 
      } 
      @Override 
      public void onPageSelected(int arg0) { 
        CharSequence text = getString(R.string.viewpager_indicator, 
            arg0 + 1, mPager.getAdapter().getCount()); 
        indicator.setText(text); 
      } 
    }); 
    if (savedInstanceState != null) { 
      pagerPosition = savedInstanceState.getInt(STATE_POSITION); 
    } 
    mPager.setCurrentItem(pagerPosition); 
  } 
  @Override 
  public void onSaveInstanceState(Bundle outState) { 
    outState.putInt(STATE_POSITION, mPager.getCurrentItem()); 
  } 
  private class ImagePagerAdapter extends FragmentStatePagerAdapter { 
    public String[] fileList; 
    public ImagePagerAdapter(FragmentManager fm, String[] fileList) { 
      super(fm); 
      this.fileList = fileList; 
    } 
    @Override 
    public int getCount() { 
      return fileList == null ? 0 : fileList.length; 
    } 
    @Override 
    public Fragment getItem(int position) { 
      String url = fileList[position]; 
      return ImageDetailFragment.newInstance(url); 
    } 
  } 
2 큰 그림 창 보기

public class ImageDetailFragment extends Fragment { 
  private String mImageUrl; 
  private ImageView mImageView; 
  private ProgressBar progressBar; 
  private PhotoViewAttacher mAttacher; 
  public static ImageDetailFragment newInstance(String imageUrl) { 
    final ImageDetailFragment f = new ImageDetailFragment(); 
    final Bundle args = new Bundle(); 
    args.putString("url", imageUrl); 
    f.setArguments(args); 
    return f; 
  } 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    mImageUrl = getArguments() != null ? getArguments().getString("url") : null; 
  } 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
    final View v = inflater.inflate(R.layout.image_detail_fragment, container, false); 
    mImageView = (ImageView) v.findViewById(R.id.image); 
    mAttacher = new PhotoViewAttacher(mImageView); 
    mAttacher.setOnPhotoTapListener(new OnPhotoTapListener() { 
      @Override 
      public void onPhotoTap(View arg0, float arg1, float arg2) { 
        getActivity().finish(); 
      } 
    }); 
    progressBar = (ProgressBar) v.findViewById(R.id.loading); 
    return v; 
  } 
  @Override 
  public void onActivityCreated(Bundle savedInstanceState) { 
    super.onActivityCreated(savedInstanceState); 
    ImageLoader.getInstance().displayImage(mImageUrl, mImageView, new SimpleImageLoadingListener() { 
      @Override 
      public void onLoadingStarted(String imageUri, View view) { 
        progressBar.setVisibility(View.VISIBLE); 
      } 
      @Override 
      public void onLoadingFailed(String imageUri, View view, FailReason failReason) { 
        String message = null; 
        switch (failReason.getType()) { 
        case IO_ERROR: 
          message = "    "; 
          break; 
        case DECODING_ERROR: 
          message = "      "; 
          break; 
        case NETWORK_DENIED: 
          message = "     ,    "; 
          break; 
        case OUT_OF_MEMORY: 
          message = "        "; 
          break; 
        case UNKNOWN: 
          message = "     "; 
          break; 
        } 
        Toast.makeText(getActivity(), message, Toast.LENGTH_SHORT).show(); 
        progressBar.setVisibility(View.GONE); 
      } 
      @Override 
      public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { 
        progressBar.setVisibility(View.GONE); 
        mAttacher.update(); 
      } 
    }); 
  } 
     넷.  인터페이스의 두상 원형
      원형 프로필 사진 은 주류 의 circlemeview.jar 프레임 워 크 를 사용 하지만 관심 이 있 는 친구 들 도 Imagview 를 사용자 정의 하여 onDrawI()를 다시 쓰 고 원형 을 그 리 는 방식 으로 bitmap 를 그 릴 수 있 습 니 다.이 demo 의 전체적인 기능 이 복잡 하기 때문에 제3자 의 것 을 사용 할 수 있 습 니 다.ListView 항목 의 구 조 는 다음 과 같 습 니 다.

 <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:padding="6dp" > 
  <de.hdodenhof.circleimageview.CircleImageView 
    android:id="@+id/avator" 
    android:layout_width="48dp" 
    android:layout_height="48dp" 
    android:src="@drawable/empty_photo" /> 
  <TextView 
    android:id="@+id/name" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="10dp" 
    android:layout_toRightOf="@id/avator" 
    android:textColor="#576B95" 
    android:textSize="16sp" 
    android:text="name" /> 
  <TextView 
    android:id="@+id/content" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/name" 
    android:layout_marginLeft="10dp" 
    android:textSize="12sp" 
    android:layout_toRightOf="@id/avator" 
    android:text="content" /> 
  <com.loveplusplus.demo.image.NoScrollGridView 
    android:id="@+id/gridView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingTop="5dp" 
    android:layout_below="@id/content" 
    android:layout_marginLeft="10dp" 
    android:layout_toRightOf="@id/avator" 
    android:horizontalSpacing="1dp" 
    android:numColumns="3" 
    android:visibility="gone" 
    android:verticalSpacing="1dp" /> 
</RelativeLayout> 
   다음은 주류 포 토 뷰 를 프로젝트 에 추가 해 야 합 니 다.
   상기 기능 을 실현 하기 위해 우 리 는 세 번 째 imagloader 를 사 용 했 습 니 다.제스처 크기 조정 을 지원 하 는 PhotoView,원형 이미지 의 circlemimageView,안 드 로 이 드 view 그리 기 체제 로 딩 과정 을 잘 알 고 있 습 니 다.사건 전달 과 배 포 된 친 구 는 제3자 오픈 소스 프로젝트 의 지원 이 필요 하지 않 습 니 다.그러나 입문 한 지 얼마 되 지 않 은 학생 들 에 게 오픈 소스 프레임 워 크 를 어떻게 사용 하 는 지 배우 면 됩 니 다.하지만 개원 프로젝트 의 핵심 을 높이 려 면 알 아야 합 니 다.읽 어 주시 기 바 랍 니 다.
  실행 효과 그림:
 
  관심 있 는 친 구 는 읽 어 보 는 것 을 권장 합 니 다.
     안 드 로 이 드 사건 메커니즘(一)과 전편 View 에 관 한 박문.교류 와 공유 에 감 사 드 립 니 다.
demo 소스 다운로드 주소:https://github.com/Tamicer/CHatMomentDemo
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 안 드 로 이 드 모방 위 챗 친구 권 의 동태 적 인 지원 더 블 클릭 제스처 확대 와 미끄럼 으로 그림 효 과 를 볼 수 있 습 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기