UI研究【my３６５編②】

Git使い方分かったんでこの関連記事が終わる頃には投稿します。

前回の考察では

①選択した写真のセルを一番上に移動する。（おそらくアニメーションはYES。後述）その際セルを大きくする。 画像も大きい画像に切り替え。
②①直後、写真を押すとその写真は徐々に透過する。（微妙）
③②同時、その時のViewの画像を取る。
④ ③後、アニメーションで③の画像を徐々に下に下げる。
⑤開く場合は出来上がり？

と書きました。（なんか色がやすっちい）

説明を書いていたら案外多くなりそうなんで考察の①②を細かく説明します。

選択した写真のセルを一番上に移動する

写真を選択する前のフィードはUITableViewで構成されていると思います。

そしてセクションごとに

１セル目：投稿者の画像と名前

２セル目：小さい画像

３、４セル目：いいねボタンとコメント欄

なっていると思います。

１セル目に関してはいいとして、２セル目は元の画像を毎回加工して保存しているのか、加工した画像をダウンロードしているのかわかりません。後者の加工した画像が元々あると仮定しておきます。また３、４セル目に関しては、画像を押すまでは表示されません。

では実際に２セル目の小さい画像を押してセルを一番上にする方法は

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

    [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
}

これだけです。セルを選択したときの関数にセルの位置を変更する関数を呼べばOKです。位置を指定する関数についてはぐぐったほうがいいのでてきます。

ここでなぜanimated:YESなのかというと、my365で小さい写真を押して、セルが上に配置される前にもう一度押すと止まるからです。これがanimated:NOだと止まらず上に配置されてしまうからです。

セル数を変更する

説明いるか迷ったんですが、お馬鹿な僕は１ヶ月ごには忘れてしまうため記録のつもりで書きます。

セルを上に配置後、３、４つ目のセルが表示される必要があるためセルの数を指定する関数内にて

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSInteger num;
    NSString *number = [sectionCellNumberManagement_ objectForKey:[NSString stringWithFormat:@"%d",section]]; 
    num = [number intValue];
    return num;
}

と書きます。

クールな方法が思いつかなかったため、NSMutableDictionary型のsectionCellNumberManagementにセクションごとのセル数を保存しておきます。

セル数の切り替えについては先ほどセルを上に配置した際に利用した、セル選択の関数内で

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    //indexPathからセクションが何番目か取り出し、それをキーに現在のセル数を数える
    //これはセル数が２の場合（押される前）
    if([[sectionCellNumberManagement_ objectForKey:[NSString stringWithFormat:@"%d",indexPath.section]] isEqual:@"2"]  ) {
      //コメント数は変動するためsetValueは本当は4ではいけない。
      [sectionCellNumberManagement_ setValue:@"4" forKey:[NSString stringWithFormat:@"%d",indexPath.section]];
        if(indexPath.row == 0) {
            NSLog(@"yes 2222");
        } else if (indexPath.row == 1) {
            [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
        }
    } else {
      //略してあります中のifは上記と同じ
      [sectionCellNumberManagement_ setValue:@"2" forKey:[NSString stringWithFormat:@"%d",indexPath.section]];
    }
}

セルを大きくする

そして最後に２セル目を高さ340にして出来上がりです。

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

    CGFloat cellHeight;
    if(indexPath.row == 0) {
        cellHeight = 22;
    } else if ( indexPath.row == 1) {
        if ([[sectionCellNumberManagement_ objectForKey:[NSString stringWithFormat:@"%d",indexPath.section]] isEqual:@"2"]) {
                cellHeight = 75;
        } else {
            cellHeight = 340;
        }
    } else if ( indexPath.row == 2){
        cellHeight = 40;
    } else {
        cellHeight = 30;
    }
	return cellHeight;
}

多分これでそれっぽくなります！

小さい画像と大きい画像の切り替えについては段階をおってついでに書きます。